feat: use chainWebpack

Author: Guillaume Chau

index.js

@@ -10,7 +10,12 @@ module.exports = (api, options) => {
 
   api.chainWebpack(webpackConfig => {
     // Default entry
-    webpackConfig.entry('app').clear().add(config.entry('client'))
+    if (!process.env.VUE_CLI_SSR_TARGET) {
+      webpackConfig.entry('app').clear().add(config.entry('client'))
+    } else {
+      const { chainWebpack } = require('./lib/webpack')
+      chainWebpack(webpackConfig)
+    }
   })
 
   api.registerCommand('ssr:build', {
@@ -24,9 +29,8 @@ module.exports = (api, options) => {
 
     rimraf.sync(api.resolve(config.distPath))
 
-    const { getWebpackConfig } = require('./lib/webpack')
-    const clientConfig = getWebpackConfig({ service, target: 'client' })
-    const serverConfig = getWebpackConfig({ service, target: 'server' })
+    const { getWebpackConfigs } = require('./lib/webpack')
+    const [clientConfig, serverConfig] = getWebpackConfigs(service)
 
     const compiler = webpack([clientConfig, serverConfig])
     const onCompilationComplete = (err, stats) => {

lib/dev-server.js

@@ -4,7 +4,6 @@ const webpack = require('webpack')
 const chalk = require('chalk')
 
 const config = require('./config')
-const { getWebpackConfig } = require('./webpack')
 
 module.exports.setupDevServer = ({ server, templatePath, onUpdate }) => new Promise((resolve, reject) => {
   const service = config.service
@@ -20,8 +19,8 @@ module.exports.setupDevServer = ({ server, templatePath, onUpdate }) => new Prom
     } catch (e) {}
   }
 
-  const clientConfig = getWebpackConfig({ service, target: 'client' })
-  const serverConfig = getWebpackConfig({ service, target: 'server' })
+  const { getWebpackConfigs } = require('./webpack')
+  const [clientConfig, serverConfig] = getWebpackConfigs(service)
 
   let serverBundle
   let template

lib/webpack.js

@@ -7,12 +7,11 @@ const config = require('./config')
 const HtmlFilterPlugin = require('./plugins/HtmlFilterPlugin')
 const CssContextLoader = require.resolve('./loaders/css-context')
 
-exports.getWebpackConfig = ({ target }) => {
-  const service = config.service
-  const isProd = service.mode === 'production'
+exports.chainWebpack = (webpackConfig) => {
+  const target = process.env.VUE_CLI_SSR_TARGET
+  if (!target) return
   const isClient = target === 'client'
-
-  let webpackConfig = service.resolveChainableWebpackConfig()
+  const isProd = process.env.VUE_CLI_MODE === 'production'
 
   // Remove unneeded plugins
   webpackConfig.plugins.delete('hmr')
@@ -98,6 +97,13 @@ exports.getWebpackConfig = ({ target }) => {
       return options
     })
   }
+}
 
-  return service.resolveWebpackConfig(webpackConfig)
+exports.getWebpackConfigs = (service) => {
+  process.env.VUE_CLI_MODE = service.mode
+  process.env.VUE_CLI_SSR_TARGET = 'client'
+  const clientConfig = service.resolveWebpackConfig()
+  process.env.VUE_CLI_SSR_TARGET = 'server'
+  const serverConfig = service.resolveWebpackConfig()
+  return [clientConfig, serverConfig]
 }