feat: webpack refactor (#3747)

* refactor: use more standard entrypoint config

* refactor: fix dev entry name

* refactor: webpack devtool and optimization

lib/builder/webpack/base.js

@@ -60,6 +60,10 @@ export default class WebpackBaseConfig {
     return fileName
   }
 
+  devtool() {
+    return false
+  }
+
   env() {
     const env = {
       'process.mode': JSON.stringify(this.options.mode),
@@ -85,6 +89,10 @@ export default class WebpackBaseConfig {
     }
   }
 
+  optimization() {
+    return this.options.build.optimization
+  }
+
   alias() {
     return {
       '~': path.join(this.options.srcDir),
@@ -281,7 +289,8 @@ export default class WebpackBaseConfig {
     const config = {
       name: this.name,
       mode: this.options.dev ? 'development' : 'production',
-      optimization: {},
+      devtool: this.devtool(),
+      optimization: this.optimization(),
       output: this.output(),
       performance: {
         maxEntrypointSize: 1000 * 1024,

lib/builder/webpack/client.js

@@ -23,6 +23,26 @@ export default class WebpackClientConfig extends WebpackBaseConfig {
     })
   }
 
+  optimization() {
+    const optimization = super.optimization()
+
+    // Small, known and common modules which are usually used project-wise
+    // Sum of them may not be more than 244 KiB
+    if (
+      this.options.build.splitChunks.commons === true &&
+      optimization.splitChunks.cacheGroups.commons === undefined
+    ) {
+      optimization.splitChunks.cacheGroups.commons = {
+        test: /node_modules[\\/](vue|vue-loader|vue-router|vuex|vue-meta|core-js|@babel\/runtime|axios|webpack|setimmediate|timers-browserify|process|regenerator-runtime|cookie|js-cookie|is-buffer|dotprop|nuxt\.js)[\\/]/,
+        chunks: 'all',
+        priority: 10,
+        name: true
+      }
+    }
+
+    return optimization
+  }
+
   plugins() {
     const plugins = super.plugins()
 
@@ -103,34 +123,18 @@ export default class WebpackClientConfig extends WebpackBaseConfig {
     const config = super.config()
 
     // Entry points
-    config.entry = path.resolve(this.options.buildDir, 'client.js')
+    config.entry = {
-
+      app: [path.resolve(this.options.buildDir, 'client.js')]
-    // -- Optimization --
-    config.optimization = this.options.build.optimization
-
-    // Small, known and common modules which are usually used project-wise
-    // Sum of them may not be more than 244 KiB
-    if (
-      this.options.build.splitChunks.commons === true &&
-      config.optimization.splitChunks.cacheGroups.commons === undefined
-    ) {
-      config.optimization.splitChunks.cacheGroups.commons = {
-        test: /node_modules[\\/](vue|vue-loader|vue-router|vuex|vue-meta|core-js|@babel\/runtime|axios|webpack|setimmediate|timers-browserify|process|regenerator-runtime|cookie|js-cookie|is-buffer|dotprop|nuxt\.js)[\\/]/,
-        chunks: 'all',
-        priority: 10,
-        name: true
-      }
     }
 
     // Add HMR support
     if (this.options.dev) {
-      config.entry = [
+      config.entry.app.unshift(
         // https://github.com/glenjamin/webpack-hot-middleware#config
         `webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=${
           this.options.router.base
-        }/__webpack_hmr`.replace(/\/\//g, '/'),
+        }/__webpack_hmr`.replace(/\/\//g, '/')
-        config.entry
+      )
-      ]
     }
 
     // Add friendly error plugin

lib/builder/webpack/server.js

@@ -12,6 +12,10 @@ export default class WebpackServerConfig extends BaseConfig {
     super(builder, { name: 'server', isServer: true })
   }
 
+  devtool() {
+    return 'cheap-source-map'
+  }
+
   env() {
     return Object.assign(super.env(), {
       'process.env.VUE_ENV': JSON.stringify('server'),
@@ -21,6 +25,13 @@ export default class WebpackServerConfig extends BaseConfig {
     })
   }
 
+  optimization() {
+    return {
+      splitChunks: false,
+      minimizer: []
+    }
+  }
+
   plugins() {
     const plugins = super.plugins()
     plugins.push(
@@ -35,13 +46,12 @@ export default class WebpackServerConfig extends BaseConfig {
   config() {
     const config = super.config()
 
-    // Config devtool
-    config.devtool = 'cheap-source-map'
-
     Object.assign(config, {
       target: 'node',
       node: false,
-      entry: path.resolve(this.options.buildDir, 'server.js'),
+      entry: {
+        app: [path.resolve(this.options.buildDir, 'server.js')]
+      },
       output: Object.assign({}, config.output, {
         filename: 'server-bundle.js',
         libraryTarget: 'commonjs2'
@@ -50,11 +60,7 @@ export default class WebpackServerConfig extends BaseConfig {
         hints: false,
         maxAssetSize: Infinity
       },
-      externals: [],
+      externals: []
-      optimization: {
-        splitChunks: false,
-        minimizer: []
-      }
     })
 
     // https://webpack.js.org/configuration/externals/#externals