From 0bfed390bd4a901025e09dc5755e29cb35ee679b Mon Sep 17 00:00:00 2001
From: fantasticbin <fantasticbin@vip.qq.com>
Date: Mon, 13 Jun 2022 18:23:02 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9=E6=B5=8B=E8=AF=95=E5=8F=8A?=
 =?UTF-8?q?=E7=94=9F=E4=BA=A7=E9=85=8D=E7=BD=AE=EF=BC=8C=E4=BB=A5=E9=80=82?=
 =?UTF-8?q?=E9=85=8D=E5=A4=9A=E5=85=A5=E5=8F=A3=E6=96=87=E4=BB=B6=E5=91=BD?=
 =?UTF-8?q?=E5=90=8D=EF=BC=8C=E5=8F=8A=E4=BE=9D=E8=B5=96=E5=8D=95=E7=8B=AC?=
 =?UTF-8?q?=E8=AE=B0=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config/webpack.dev.js  | 10 +++++++++-
 config/webpack.prod.js | 19 ++++++++++++++-----
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/config/webpack.dev.js b/config/webpack.dev.js
index 83eb057..bb6a67a 100644
--- a/config/webpack.dev.js
+++ b/config/webpack.dev.js
@@ -17,7 +17,7 @@ module.exports = {
         // 指定打包文件的目录
         path: undefined,
         // 打包后的文件名
-        filename: "bundle.js",
+        filename: "[name].[contenthash:10].js",
 
         // 不使用箭头函数的方式定义
         environment: {
@@ -100,6 +100,14 @@ module.exports = {
         })
     ],
 
+    // 配置压缩插件，webpack5官方建议使用这种方式
+    optimization: {
+        // 将代码依赖单独记录到runtime文件中，保证依赖文件变更时，只改变它本身的hash和runtime的hash而不改变依赖者的hash
+        runtimeChunk: {
+            name: (entrypoint) => `runtime~${entrypoint.name}.js`
+        }
+    },
+
     // 设置引用模块
     resolve: {
         extensions: [".ts", ".js"]
diff --git a/config/webpack.prod.js b/config/webpack.prod.js
index 32aa855..04d5a22 100644
--- a/config/webpack.prod.js
+++ b/config/webpack.prod.js
@@ -20,8 +20,8 @@ module.exports = {
     output: {
         // 指定打包文件的目录
         path: path.resolve(__dirname, "../dist"),
-        // 打包后的文件名
-        filename: "static/js/bundle.js",
+        // 打包后的入口脚本文件名（动态设置文件名，并增加文件内容hash值的后缀）
+        filename: "static/js/[name].[contenthash:10].js",
         // 自动清空上一次打包的内容，webpack4需使用扩展包clean-webpack-plugin插件来进行自动清空操作
         clean: true,
 
@@ -106,8 +106,8 @@ module.exports = {
         }),
         // 提取css成单独文件
         new MiniCssExtractPlugin({
-            // 定义输出文件名和目录
-            filename: "static/css/main.css"
+            // 定义输出文件名和目录（动态设置文件名，并增加文件内容hash值的后缀）
+            filename: "static/css/[name].[contenthash:10].css"
         })
     ],
 
@@ -116,7 +116,16 @@ module.exports = {
         minimizer: [
             // css压缩
             new CssMinimizerPlugin()
-        ]
+        ],
+        // 代码分割配置（单入口时默认配置会将代码中引用node_modules包中的功能时单独打包，及import动态引入的功能进行单独打包）
+        // 本项目中因使用了any-touch，则会将这部分功能单独打包成js进行引入
+        splitChunks: {
+            chunks: "all"
+        },
+        // 将代码依赖单独记录到runtime文件中，保证依赖文件变更时，只改变它本身的hash和runtime的hash而不改变依赖者的hash
+        runtimeChunk: {
+            name: (entrypoint) => `runtime~${entrypoint.name}.js`
+        }
     },
 
     // 设置引用模块