update

vue.config.js

@@ -1,18 +1,37 @@
 'use strict'
-require('@babel/register')
 const path = require('path')
-const bodyParser = require('body-parser')
 
 function resolve(dir) {
   return path.join(__dirname, dir)
 }
 
+const port = 9527 // TODO: change to Settings
+
+// Explanation of each configuration item You can find it in https://cli.vuejs.org/config/
 module.exports = {
+  /**
+   * You can set by yourself according to actual condition
+   * You will need to set this if you plan to deploy your site under a sub path,
+   * for example GitHub pages. If you plan to deploy your site to https://foo.github.io/bar/,
+   * then assetsPublicPath should be set to "/bar/".
+   * In most cases please use '/' !!!
+   * Detail https://cli.vuejs.org/config/#baseurl
+   */
+  baseUrl: '/',
+  outputDir: 'dist',
+  assetsDir: 'static',
+  lintOnSave: process.env.NODE_ENV !== 'production',
+  productionSourceMap: false,
   devServer: {
+    port: port,
     open: true,
+    overlay: {
+      warnings: false,
+      errors: true
+    },
     proxy: {
       '/api': {
-        target: 'http://localhost:8080/mock',
+        target: `http://localhost:${port}/mock`,
         changeOrigin: true,
         pathRewrite: {
           '^/api': ''
@@ -20,6 +39,9 @@ module.exports = {
       }
     },
     after(app) {
+      console.log('apple')
+      const bodyParser = require('body-parser')
+      require('@babel/register')
       // parse app.body
       // http://expressjs.com/en/4x/api.html#req.body
       app.use(bodyParser.json())
@@ -33,28 +55,74 @@ module.exports = {
     }
   },
   configureWebpack: {
+    // We provide the app's title in Webpack's name field, so that
+    // it can be accessed in index.html to inject the correct title.
+    name: 'vue-element-admin', // TODO: change to Settings
     resolve: {
       alias: {
-        '$@': resolve('src/components')
+        '@': resolve('src')
       }
-    },
-    module: {
-      rules: [
-        {
-          test: /\.svg$/,
-          loader: 'svg-sprite-loader',
-          include: [resolve('src/icons')],
-          options: {
-            symbolId: 'icon-[name]'
-          }
-        }
-      ]
     }
   },
   chainWebpack(config) {
+    config.plugins.delete('preload')// TODO: need test
+    config.plugins.delete('prefetch')// TODO: need test
     config.module
       .rule('svg')
       .exclude.add(resolve('src/icons'))
       .end()
+    config.module
+      .rule('icons')
+      .test(/\.svg$/)
+      .include.add(resolve('src/icons'))
+      .end()
+      .use('svg-sprite-loader')
+      .loader('svg-sprite-loader')
+      .options({
+        symbolId: 'icon-[name]'
+      })
+      .end()
+
+    config
+      .when(process.env.NODE_ENV === 'development',
+        config => config.devtool('cheap-source-map')
+      )
+
+    config
+      .when(process.env.NODE_ENV !== 'development',
+        config => {
+          config
+            .plugin('ScriptExtHtmlWebpackPlugin')
+            .use('script-ext-html-webpack-plugin', [{
+              // `runtime` must same as runtimeChunk name. default is `runtime`
+              inline: /runtime\..*\.js$/
+            }])
+          config
+            .optimization.splitChunks({
+              chunks: 'all',
+              cacheGroups: {
+                libs: {
+                  name: 'chunk-libs',
+                  test: /[\\/]node_modules[\\/]/,
+                  priority: 10,
+                  chunks: 'initial' // 只打包初始时依赖的第三方
+                },
+                elementUI: {
+                  name: 'chunk-elementUI', // 单独将 elementUI 拆包
+                  priority: 20, // 权重要大于 libs 和 app 不然会被打包进 libs 或者 app
+                  test: /[\\/]node_modules[\\/]element-ui[\\/]/
+                },
+                commons: {
+                  name: 'chunk-commons',
+                  test: resolve('src/components'), // 可自定义拓展你的规则
+                  minChunks: 3, // 最小公用次数
+                  priority: 5,
+                  reuseExistingChunk: true
+                }
+              }
+            })
+          config.optimization.runtimeChunk('single')
+        }
+      )
   }
 }