加载 script 标签

2025年03月09日

柏拉文

越努力，越幸运

一、认识

---

在 Webpack 项目中，如果有部分外部资源通过 <script> 标签引入，常见的处理方法包括:

1. Externals 配置: 通过 externals 告诉 Webpack 这些库是外部依赖，直接使用全局变量，避免重复打包。

2. 插入 script 标签:

   1. 手动管理: 对于部分情况，也可以将外部资源放到公共目录（如 public 文件夹），然后在 HTML 模板中直接使用 <script src="/public/xxx.js"></script> 进行引入。这样的话，Webpack 不会对这些文件做处理，但你需要确保部署时公共资源能够正确访问。

   2. 使用 HtmlWebpackPlugin：如果你希望在生成的 HTML 中自动注入外部 <script> 标签，可以利用 HtmlWebpackPlugin 配合模板，在模板中手动添加这些 <script> 标签或者通过插件选项自动注入。

      const HtmlWebpackPlugin = require('html-webpack-plugin');
      
      module.exports = {
          plugins: [
              new HtmlWebpackPlugin({
              template: './src/index.html',
              // 可以在模板中写入占位符，然后通过参数传递外部资源链接
              externals: {
                  jquery: 'https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js'
              }
              })
          ]
      };