html-webpack-externals-plugin

html-webpack-externals-plugin 集成了 webpack.externals 和 html-webpack-plugin , 相当于将 externals中排除的第三方依赖可以直接添加到 html 模板中，不用我们另外再写方法。

准备

---

1. 安装 html-webpack-externals-plugin 依赖

   yarn add html-webpack-externals-plugin -D

配置

---

1. webpack.config.js中引入html-webpack-externals-plugin插件，并配置

   const Path = require("path");
   const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');
   
   module.exports = {
       plugins: [
           new HtmlWebpackExternalsPlugin({
               externals: [
                   {
                       module: "jquery",
                       entry: {
                           path: "https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js",
                           attributes: {
                               integrity: "sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=",
                               crossorigin: "anonymous",
                           },
                       },
                       global: "jQuery",
                   },
                   {
                       module: "lodash",
                       entry: {
                           path: "https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js",
                           attributes: {
                               crossorigin: "anonymous",
                           },
                       },
                       global: "_",
                   },
               ],
               enabled: process.env.NODE_ENV === "prod",
           }),
       ],
   };