diff --git a/.vscode/launch.json b/.vscode/launch.json index 54d3b63..cbd51af 100644 --- 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 index 1157ec0..a65c785 100644 --- 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 index 9909537..60f6411 100644 --- 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" ] -} +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 9575e8a..042696f 100644 --- 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"