1

admin/webpack.config.js

@@ -1,12 +1,17 @@
 const path = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const { VueLoaderPlugin } = require('vue-loader')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+
+// 判断是否为生产环境
+const is_production = process.env.NODE_ENV === 'production' || process.argv.includes('--mode=production')
 
 module.exports = {
   entry: './src/main.js',
   output: {
     path: path.resolve(__dirname, 'dist'),
-    filename: 'app.js',
+    filename: 'js/[name].[contenthash:8].js',
+    chunkFilename: 'js/[name].[contenthash:8].chunk.js',
     clean: true
   },
   module: {
@@ -22,11 +27,24 @@ module.exports = {
       },
       {
         test: /\.css$/,
-        use: ['vue-style-loader', 'css-loader']
+        use: [
+          is_production ? MiniCssExtractPlugin.loader : 'vue-style-loader',
+          'css-loader'
+        ]
       },
       {
-        test: /\.(png|jpe?g|gif|svg|woff2?|eot|ttf|otf)$/,
-        type: 'asset/resource'
+        test: /\.(png|jpe?g|gif|svg)$/,
+        type: 'asset/resource',
+        generator: {
+          filename: 'images/[name].[hash:8][ext]'
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)$/,
+        type: 'asset/resource',
+        generator: {
+          filename: 'fonts/[name].[hash:8][ext]'
+        }
       }
     ]
   },
@@ -35,7 +53,13 @@ module.exports = {
     new HtmlWebpackPlugin({
       template: './public/index.html',
       title: 'Admin Framework Demo'
-    })
+    }),
+    ...(is_production ? [
+      new MiniCssExtractPlugin({
+        filename: 'css/[name].[contenthash:8].css',
+        chunkFilename: 'css/[name].[contenthash:8].chunk.css'
+      })
+    ] : [])
   ],
   resolve: {
     extensions: ['.js', '.vue', '.json'],
@@ -52,6 +76,58 @@ module.exports = {
     client: {
       overlay: false  // 禁用错误浮层
     }
+  },
+  optimization: {
+    splitChunks: {
+      chunks: 'all',
+      cacheGroups: {
+        // 分离 Vue 核心库
+        vue: {
+          name: 'vue',
+          test: /[\\/]node_modules[\\/](vue|vue-router|vuex)[\\/]/,
+          priority: 20,
+          reuseExistingChunk: true
+        },
+        // 分离 UI 库
+        ui: {
+          name: 'ui',
+          test: /[\\/]node_modules[\\/]view-design[\\/]/,
+          priority: 15,
+          reuseExistingChunk: true
+        },
+        // 分离图表库
+        echarts: {
+          name: 'echarts',
+          test: /[\\/]node_modules[\\/]echarts[\\/]/,
+          priority: 15,
+          reuseExistingChunk: true
+        },
+        // 分离其他第三方库
+        vendor: {
+          name: 'vendor',
+          test: /[\\/]node_modules[\\/]/,
+          priority: 10,
+          reuseExistingChunk: true
+        },
+        // 公共代码
+        common: {
+          name: 'common',
+          minChunks: 2,
+          priority: 5,
+          reuseExistingChunk: true
+        }
+      }
+    },
+    runtimeChunk: {
+      name: 'runtime'
+    }
+  },
+  stats: {
+    colors: true,
+    modules: false,
+    children: false,
+    chunks: false,
+    chunkModules: false
   }
 }