fix: upgrade webpack-chain, fix css optimization settings (close #91)

Author: yyx990803

lib/build.js

@@ -26,9 +26,6 @@ module.exports = async function build (sourceDir, cliOptions = {}) {
   let clientConfig = createClientConfig(options, cliOptions).toConfig()
   let serverConfig = createServerConfig(options, cliOptions).toConfig()
 
-  // disable uglify for server
-  serverConfig.optimization = { minimizer: [] }
-
   // apply user config...
   const userConfig = options.siteConfig.configureWebpack
   if (userConfig) {
@@ -168,6 +165,7 @@ module.exports = async function build (sourceDir, cliOptions = {}) {
     const styleChunk = stats.children[0].assets.find(a => {
       return /styles\.\w{8}\.js$/.test(a.name)
     })
+    if (!styleChunk) return
     const styleChunkPath = path.resolve(outDir, styleChunk.name)
     const styleChunkContent = await fs.readFile(styleChunkPath, 'utf-8')
     await fs.remove(styleChunkPath)

lib/webpack/createBaseConfig.js

@@ -19,7 +19,7 @@ module.exports = function createBaseConfig ({
   const config = new Config()
 
   config
-    .set('mode', isProd && !debug ? 'production' : 'development')
+    .mode(isProd && !debug ? 'production' : 'development')
     .output
       .path(outDir)
       .filename(isProd ? 'assets/js/[name].[chunkhash:8].js' : 'assets/js/[name].js')
@@ -204,20 +204,17 @@ module.exports = function createBaseConfig ({
     // ensure all css are extracted together.
     // since most of the CSS will be from the theme and very little
     // CSS will be from async chunks
-    config
-      .set('optimization', {
-        splitChunks: {
-          cacheGroups: {
-            styles: {
-              name: 'styles',
-              // necessary for extraction to include md files as well
-              test: m => /css-extract/.test(m.type),
-              chunks: 'all',
-              enforce: true
-            }
-          }
+    config.optimization.splitChunks({
+      cacheGroups: {
+        styles: {
+          name: 'styles',
+          // necessary to ensure async chunks are also extracted
+          test: m => /css-extract/.test(m.type),
+          chunks: 'all',
+          enforce: true
         }
-      })
+      }
+    })
   }
 
   // inject constants

lib/webpack/createServerConfig.js

@@ -13,6 +13,9 @@ module.exports = function createServerConfig (options, cliOptions) {
     .target('node')
     .externals([/^vue|vue-router$/])
 
+  // no need to minimize server build
+  config.optimization.minimize(false)
+
   config
     .entry('app')
       .add(path.resolve(__dirname, '../app/serverEntry.js'))

package.json

@@ -56,7 +56,6 @@
     "file-loader": "^1.1.11",
     "fs-extra": "^5.0.0",
     "globby": "^8.0.1",
-    "vuepress-html-webpack-plugin": "^3.2.0",
     "koa-connect": "^2.0.1",
     "koa-mount": "^3.0.0",
     "koa-static": "^4.0.2",
@@ -84,8 +83,9 @@
     "vue-router": "^3.0.1",
     "vue-server-renderer": "^2.5.16",
     "vue-template-compiler": "^2.5.16",
-    "webpack": "^4.4.1",
-    "webpack-chain": "^4.5.0",
+    "vuepress-html-webpack-plugin": "^3.2.0",
+    "webpack": "^4.5.0",
+    "webpack-chain": "^4.6.0",
     "webpack-merge": "^4.1.2",
     "webpack-serve": "^0.3.1",
     "webpackbar": "^2.6.1",