refactor: use webpack-chain in webpack config (#16), closes #15

* use webpack-chain in webpack config

* fix: remove no-emit-on-errors

* fix: entry

* feat: improve error messages handling

Author: Laurynas

lib/dev-server.js

@@ -44,7 +44,7 @@ module.exports.setupDevServer = ({ server, templatePath, onUpdate }) => new Prom
   }
 
   // modify client config to work with hot middleware
-  clientConfig.entry = ['webpack-hot-middleware/client', clientConfig.entry]
+  clientConfig.entry.app = ['webpack-hot-middleware/client', ...clientConfig.entry.app]
   clientConfig.plugins.push(
     new webpack.HotModuleReplacementPlugin(),
   )
@@ -61,10 +61,16 @@ module.exports.setupDevServer = ({ server, templatePath, onUpdate }) => new Prom
   server.use(devMiddleware)
 
   clientCompiler.hooks.done.tap('cli ssr', async stats => {
-    stats = stats.toJson()
-    stats.errors.forEach(err => console.error(err))
-    stats.warnings.forEach(err => console.warn(err))
-    if (stats.errors.length) return
+    const jsonStats = stats.toJson()
+    if (stats.hasErrors()) {
+      console.log(chalk.red('Client errors'))
+      jsonStats.errors.forEach(err => console.error(err))
+    }
+    if (stats.hasWarnings()) {
+      console.log(chalk.yellow('Client warnings'))
+      jsonStats.warnings.forEach(err => console.warn(err))
+    }
+    if (stats.hasErrors()) return
     clientManifest = JSON.parse(readFile(
       devMiddleware.fileSystem,
       'vue-ssr-client-manifest.json'
@@ -77,6 +83,11 @@ module.exports.setupDevServer = ({ server, templatePath, onUpdate }) => new Prom
     onCompilationCompleted()
   })
 
+  clientCompiler.hooks.failed.tap('cli ssr', (error) => {
+    console.log(chalk.red('Client compilation failed'))
+    console.error(error)
+  })
+
   // hot module replacement middleware
   server.use(require('webpack-hot-middleware')(clientCompiler, { heartbeat: 5000 }))
 
@@ -85,9 +96,20 @@ module.exports.setupDevServer = ({ server, templatePath, onUpdate }) => new Prom
   const serverMfs = new MFS()
   serverCompiler.outputFileSystem = serverMfs
   serverCompiler.watch({}, (err, stats) => {
-    if (err) throw err
-    stats = stats.toJson()
-    if (stats.errors.length) return
+    if (err) {
+      console.log(chalk.red('Server critical error'))
+      throw err
+    }
+    const jsonStats = stats.toJson()
+    if (stats.hasErrors()) {
+      console.log(chalk.red('Server errors'))
+      jsonStats.errors.forEach(err => console.error(err))
+    }
+    if (stats.hasWarnings()) {
+      console.log(chalk.yellow('Server warnings'))
+      jsonStats.warnings.forEach(err => console.warn(err))
+    }
+    if (stats.hasErrors()) return
     // read bundle generated by vue-ssr-webpack-plugin
     serverBundle = JSON.parse(readFile(serverMfs, 'vue-ssr-server-bundle.json'))
     update()

lib/webpack.js

@@ -1,5 +1,3 @@
-const webpack = require('webpack')
-const mergeWebpack = require('webpack-merge')
 const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
 const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
 const nodeExternals = require('webpack-node-externals')
@@ -21,7 +19,7 @@ exports.getWebpackConfig = ({ target }) => {
   webpackConfig.plugins.delete('preload')
   webpackConfig.plugins.delete('prefetch')
   webpackConfig.plugins.delete('progress')
-  webpackConfig.plugins.delete('no-emit-on-errors')
+  if (!isProd) webpackConfig.plugins.delete('no-emit-on-errors')
 
   if (!isClient) {
     webpackConfig.plugins.delete('friendly-errors')
@@ -52,83 +50,54 @@ exports.getWebpackConfig = ({ target }) => {
     })
   }
 
-  webpackConfig = service.resolveWebpackConfig(webpackConfig)
-
-  webpackConfig = mergeWebpack(webpackConfig, {
-    entry: config.entry(target),
-    plugins: [
-      new webpack.DefinePlugin({
-        'process.client': target === 'client',
-        'process.server': target === 'server',
-      }),
-      new webpack.NoEmitOnErrorsPlugin(),
-    ],
-    stats: isProd ? 'normal' : 'none',
-    devServer: {
-      stats: 'errors-only',
-      quiet: true,
-      noInfo: true,
-    },
+  webpackConfig.entry('app').clear().add(config.entry(target))
+
+  webpackConfig.plugin('define').tap(args => {
+    return [Object.assign(args[0], {'process.client': target === 'client', 'process.server': target === 'server'})]
   })
 
+  webpackConfig.stats(isProd ? 'normal' : 'none')
+  webpackConfig.devServer.stats('errors-only').quiet(true).noInfo(true)
+
   if (isClient) {
-    webpackConfig = mergeWebpack(webpackConfig, {
-      plugins: [
-        new VueSSRClientPlugin(),
-        new WebpackBar({
-          name: 'Client',
-          color: 'green',
-        }),
-      ],
-      devtool: !isProd ? '#cheap-module-source-map' : undefined,
+    webpackConfig.plugin('ssr').use(VueSSRClientPlugin)
+    webpackConfig.plugin('loader').use(WebpackBar, [{name: 'Client', color: 'green'}])
+
+    webpackConfig.devtool(!isProd ? '#cheap-module-source-map' : undefined)
+
+    webpackConfig.module.rule('vue').use('vue-loader').tap(options => {
+      options.optimizeSSR = false
+      return options
     })
   } else {
-    webpackConfig = mergeWebpack(webpackConfig, {
-      plugins: [
-        new VueSSRServerPlugin(),
-        new WebpackBar({
-          name: 'Server',
-          color: 'orange',
-        }),
-      ],
-      externals: nodeExternals({
-        whitelist: config.nodeExternalsWhitelist,
-      }),
-      output: {
-        libraryTarget: 'commonjs2',
-      },
-      target: 'node',
-      devtool: 'source-map',
-      optimization: {
-        splitChunks: false,
-        minimize: false,
-      },
-    })
+    webpackConfig.plugin('ssr').use(VueSSRServerPlugin)
+    webpackConfig.plugin('loader').use(WebpackBar, [{name: 'Server', color: 'orange'}])
 
-    delete webpackConfig.node
-  }
+    webpackConfig.devtool('source-map')
+    webpackConfig.externals(nodeExternals({whitelist: config.nodeExternalsWhitelist}))
+    webpackConfig.output.libraryTarget('commonjs2'); webpackConfig.target('node')
+    webpackConfig.optimization.splitChunks(false).minimize(false)
 
-  for (const rule of webpackConfig.module.rules) {
-    if (rule.use) {
-      for (const item of rule.use) {
-        item.options = item.options || {}
-        if (item.loader === 'cache-loader' && !isClient) {
-          // Change cache directory for server-side
-          item.options.cacheIdentifier += '-server'
-          item.options.cacheDirectory += '-server'
-        } else if (item.loader === 'vue-loader') {
-          // Optimize SSR only on server-side
-          if (isClient) {
-            item.options.optimizeSSR = false
-          } else {
-            item.options.cacheIdentifier += '-server'
-            item.options.cacheDirectory += '-server'
-            item.options.optimizeSSR = true
-          }
-        }
-      }
+    webpackConfig.node.clear()
+
+    if (!isClient) {
+      webpackConfig.module.rule('vue').use('cache-loader').tap(options => {
+        // Change cache directory for server-side
+        options.cacheIdentifier += '-server'
+        options.cacheDirectory += '-server'
+        return options
+      })
     }
+
+    webpackConfig.module.rule('vue').use('vue-loader').tap(options => {
+      if (!isClient) {
+        options.cacheIdentifier += '-server'
+        options.cacheDirectory += '-server'
+      }
+      options.optimizeSSR = !isClient
+      return options
+    })
   }
 
-  return webpackConfig
+  return service.resolveWebpackConfig(webpackConfig)
 }