fix: smp包裹一层会导致HtmlWebpackPlugin.getHook重新创建hooks对象，导致auto-external-p…

…lugin注册的alterAssetTags事件丢失，以至于无法注入配置的CDN，所以将smp挪至仅用于npm run build:analyzer方式打包查看分析结果
yxw007 · Feb 24, 2022 · 6c2e998 · 6c2e998
1 parent 52f9b95
commit 6c2e998
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 90 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -22,7 +22,7 @@
             "request": "launch",
             "runtimeArgs": [
                 "run",
-                "dev:build"
+                "build"
             ],
             "runtimeExecutable": "npm",
             "skipFiles": [

diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js
@@ -35,96 +35,105 @@ threadLoader.warmup(
   ["cache-loader", "style-loader", "css-loader", "postcss-loader", "less-loader", "sass-loader", "sass-resources-loader"]
 ); */
 
-const wrapConfig = smp.wrap(
-  merge(baseWebpackConfig, {
-    mode,
-    output: {
-      path: config.build.assetsRoot,
-      filename: utils.assetsPath("js/[name].[chunkhash].js"),
-      chunkFilename: utils.assetsPath("js/[id].[chunkhash].js"),
-      publicPath: config.build.assetsPublicPath,
-    },
-    devtool: config.build.devtool,
-    optimization: {
-      minimizer: [new TerserPlugin(), new CssMinimizerPlugin()],
-      usedExports: true,
-    },
-    // sideEffects: ["*.css"],
-    module: {
-      rules: [
-        {
-          test: /\.css$/,
-          use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
-        },
-        {
-          test: /\.less$/,
-          use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader", "less-loader"],
-        },
-        {
-          test: /\.s[ac]ss$/,
-          use: [
-            MiniCssExtractPlugin.loader,
-            "css-loader",
-            "postcss-loader",
-            // "thread-loader",
-            "sass-loader",
-            {
-              loader: "sass-resources-loader",
-              options: {
-                resources: [utils.resolve("src/style/variables.scss")],
-              },
+let webpackConfig = merge(baseWebpackConfig, {
+  mode,
+  output: {
+    path: config.build.assetsRoot,
+    filename: utils.assetsPath("js/[name].[chunkhash].js"),
+    chunkFilename: utils.assetsPath("js/[id].[chunkhash].js"),
+    publicPath: config.build.assetsPublicPath,
+  },
+  devtool: config.build.devtool,
+  optimization: {
+    minimizer: [new TerserPlugin(), new CssMinimizerPlugin()],
+    usedExports: true,
+  },
+  // sideEffects: ["*.css"],
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
+      },
+      {
+        test: /\.less$/,
+        use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader", "less-loader"],
+      },
+      {
+        test: /\.s[ac]ss$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          "css-loader",
+          "postcss-loader",
+          // "thread-loader",
+          "sass-loader",
+          {
+            loader: "sass-resources-loader",
+            options: {
+              resources: [utils.resolve("src/style/variables.scss")],
             },
-          ],
-        },
-        {
-          test: /\.styl$/,
-          use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader", "stylus-loader"],
-        },
-      ],
-    },
-    plugins: [
-      new webpack.DefinePlugin({
-        "process.env": env,
-      }),
-      new CleanWebpackPlugin({
-        output: {
-          path: config.build.assetsRoot,
-        },
-      }),
-      // new MiniCssExtractPlugin({
-      //   filename: utils.assetsPath("css/[name].[hash].css"),
-      //   ignoreOrder: true,
-      // }),
-      new HtmlWebpackPlugin({
-        filename: "index.html",
-        template: utils.resolve(`public/index.html`),
-      }),
-      new AutoExternalPlugin(config.build.externalLibs),
+          },
+        ],
+      },
+      {
+        test: /\.styl$/,
+        use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader", "stylus-loader"],
+      },
     ],
-    performance: {
-      hints: false,
-      maxEntrypointSize: 512000,
-      maxAssetSize: 512000,
-    },
-    externals: {
-      exceljs: "ExcelJS",
-    },
-  })
-);
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      "process.env": env,
+    }),
+    new CleanWebpackPlugin({
+      output: {
+        path: config.build.assetsRoot,
+      },
+    }),
+    // new MiniCssExtractPlugin({
+    //   filename: utils.assetsPath("css/[name].[hash].css"),
+    //   ignoreOrder: true,
+    // }),
+    new HtmlWebpackPlugin({
+      filename: "index.html",
+      template: utils.resolve(`public/index.html`),
+    }),
+    new AutoExternalPlugin(config.build.externalLibs),
+  ],
+  performance: {
+    hints: false,
+    maxEntrypointSize: 512000,
+    maxAssetSize: 512000,
+  },
+  externals: {
+    exceljs: "ExcelJS",
+  },
+});
 
-//说明：由于VueLoaderPlugin和MiniCssExtractPlugin与smp版本不兼容，报："You forgot to add 'mini-css-extract-plugin' plugin"，所以需要单独抽出来此处
-//参考文献：https://github.com/stephencookdev/speed-measure-webpack-plugin/issues/167
-wrapConfig.plugins.push(
+/* 后置插件 */
+const tailPlugins = [
   new VueLoaderPlugin(),
+
   new SpriteLoaderPlugin({ plainSprite: false }),
   new MiniCssExtractPlugin({
     filename: utils.assetsPath("css/[name].[contenthash].css"),
     ignoreOrder: true,
-  })
-);
+  }),
+];
 
 if (isShowAnalyzer) {
+  //说明：smp包裹一层会导致HtmlWebpackPlugin.getHook重新创建hooks对象，导致auto-external-plugin注册的alterAssetTags事件丢失，以至于无法注入配置的CDN
+  //所以将smp挪至仅用于npm run build:analyzer方式打包查看分析结果
+  const wrapConfig = smp.wrap(webpackConfig);
+
+  //说明：由于VueLoaderPlugin和MiniCssExtractPlugin与smp版本不兼容，报："You forgot to add 'mini-css-extract-plugin' plugin"，所以需要单独抽出来此处
+  //参考文献：https://github.com/stephencookdev/speed-measure-webpack-plugin/issues/167
+  wrapConfig.plugins.push(tailPlugins);
   wrapConfig.plugins.push(new BundleAnalyzerPlugin());
+
+  webpackConfig = wrapConfig;
+} else {
+  webpackConfig.plugins.push(...tailPlugins);
 }
 
-module.exports = wrapConfig;
+module.exports = webpackConfig;
diff --git a/package.json b/package.json
@@ -9,7 +9,8 @@
     "build": "cross-env node build/index.js ENV_TYPE=1 platform=pc",
     "build:analyzer": "cross-env node build/index.js ENV_TYPE=1 platform=pc --bundle-analyzer",
     "dev:build": "cross-env node build/index.js ENV_TYPE=1 platform=pc mode=development",
-    "test": "webpack --config build/webpack.prod.conf.js"
+    "test": "webpack --config build/webpack.prod.conf.js",
+    "posttest": "webpack --config webpack.config.js"
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
@@ -47,7 +48,7 @@
     "vue-loader": "^15.9.8",
     "vue-style-loader": "^4.1.3",
     "vue-template-compiler": "^2.6.14",
-    "webpack": "^5.68.0",
+    "webpack": "^5.69.1",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.4.0",
@@ -62,4 +63,4 @@
     "> 1%",
     "not IE <= 10"
   ]
-}
+}
diff --git a/yarn.lock b/yarn.lock
@@ -2793,7 +2793,7 @@ encodeurl@~1.0.2:
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
 
-enhanced-resolve@^5.9.0:
+enhanced-resolve@^5.8.3:
   version "5.9.0"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.9.0.tgz#49ac24953ac8452ed8fed2ef1340fc8e043667ee"
   integrity sha512-weDYmzbBygL7HzGGS26M3hGQx68vehdEg6VUmqSOaFzXExFqlnKuSvsEJCVGQHScS8CQMbrAqftT+AzzHNt/YA==
@@ -7309,10 +7309,10 @@ webpack-sources@^3.2.3:
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
-webpack@^5.68.0:
-  version "5.69.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.69.0.tgz#c9eb607d4f6c49f1e5755492323a7b055c3450e3"
-  integrity sha512-E5Fqu89Gu8fR6vejRqu26h8ld/k6/dCVbeGUcuZjc+goQHDfCPU9rER71JmdtBYGmci7Ec2aFEATQ2IVXKy2wg==
+webpack@^5.69.1:
+  version "5.69.1"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.69.1.tgz#8cfd92c192c6a52c99ab00529b5a0d33aa848dc5"
+  integrity sha512-+VyvOSJXZMT2V5vLzOnDuMz5GxEqLk7hKWQ56YxPW/PQRUuKimPqmEIJOx8jHYeyo65pKbapbW464mvsKbaj4A==
   dependencies:
     "@types/eslint-scope" "^3.7.3"
     "@types/estree" "^0.0.51"
@@ -7323,7 +7323,7 @@ webpack@^5.68.0:
     acorn-import-assertions "^1.7.6"
     browserslist "^4.14.5"
     chrome-trace-event "^1.0.2"
-    enhanced-resolve "^5.9.0"
+    enhanced-resolve "^5.8.3"
     es-module-lexer "^0.9.0"
     eslint-scope "5.1.1"
     events "^3.2.0"