Webpack 如何导入 external url

在使用 Webpack 处理前端项目时，通常我们会处理项目内的资源和模块，比如 JS 文件、CSS 文件等。但有时候，我们可能需要从外部 URL 引入一些资源，这通常不是 Webpack 的默认行为。不过，有几种方法可以实现从外部 URL 导入资源。

方法一：Externals 配置

Webpack 允许你在配置中指定某些模块为外部模块（external），这意味着这些模块在运行时会从外部获取，而不是打包进输出文件中。这在处理 CDN 资源或者其他外部库时非常有用。

例如，假设你想从 CDN 加载 jQuery 而不是将它打包进你的 bundle，你可以在 webpack.config.js 中这样配置：

javascript
module.exports = {
  // 其他配置...
  externals: {
    jquery: 'jQuery'
  }
}

然后，在你的代码中，你仍然可以按正常方式引用 jQuery：

javascript
import $ from 'jquery';

$('body').text('Hello, world!');

运行时，Webpack 会期望在全局环境中有一个 jQuery 变量，这个变量应该是通过 CDN 或其他外部方式加载的。

方法二：动态导入（Dynamic Imports）

如果你需要在某个特定时刻从外部 URL 动态加载模块，你可以使用 ES6 的动态导入语法。这不是直接通过 Webpack 配置实现的，而是在代码层面处理。

例如：

javascript
function loadComponent() {
    return import('https://example.com/external-module.js')
        .then((module) => {
            return module.default;
        })
        .catch(error => 'An error occurred while loading the component');
}

loadComponent().then((component) => {
    // 使用加载的模块
});

注意，这需要你的环境支持或转译动态导入语法，并且外部资源允许被跨域请求。

方法三：使用 script 标签

最直接的方法，你可以在 HTML 文件中直接使用 <script> 标签引入外部 URL，然后在你的 JavaScript 代码中使用这些全局变量。虽然这不是通过 Webpack 实现的，但它是一种简单有效的方式，特别是在处理大型库或框架时（比如 React, Vue 等）。

例如，在你的 HTML 文件中：

html
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

然后在你的 JavaScript 文件中直接使用 $ 或 jQuery，因为它们已经被加载到全局环境中了。

总结

根据你的具体需求（例如是否控制加载时机，是否需要从 CDN 加载依赖等），你可以选择适合的方法来处理从外部 URL 导入资源的需求。通常情况下，使用 Webpack 的 externals 配置是处理这类问题的推荐方式，因为它既保持了模块的清晰引用方式，又避免了将外部库打包进输出文件。