refactor(webpack): add ability to get webpack config class (#5378)

packages/webpack/src/builder.js

@@ -6,14 +6,10 @@ import webpackDevMiddleware from 'webpack-dev-middleware'
 import webpackHotMiddleware from 'webpack-hot-middleware'
 import consola from 'consola'
 
-import {
-  parallel,
-  sequence,
-  wrapArray
-} from '@nuxt/utils'
+import { parallel, sequence, wrapArray } from '@nuxt/utils'
 import AsyncMFS from './utils/async-mfs'
 
-import { ClientConfig, ModernConfig, ServerConfig } from './config'
+import * as WebpackConfigs from './config'
 import PerfLoader from './utils/perf-loader'
 
 const glob = pify(Glob)
@@ -37,44 +33,28 @@ export class WebpackBundler {
     }
   }
 
+  getWebpackConfig(name) {
+    const Config = WebpackConfigs[name] // eslint-disable-line import/namespace
+    if (!Config) {
+      throw new Error(`Unsupported webpack config ${name}`)
+    }
+    const config = new Config(this)
+    return config.config()
+  }
+
   async build() {
     const { options } = this.buildContext
 
-    const compilersOptions = []
+    const webpackConfigs = [
+      this.getWebpackConfig('Client')
+    ]
 
-    // Client
-    const clientConfig = new ClientConfig(this).config()
-    compilersOptions.push(clientConfig)
-
-    // Modern
-    let modernConfig
     if (options.modern) {
-      modernConfig = new ModernConfig(this).config()
-      compilersOptions.push(modernConfig)
+      webpackConfigs.push(this.getWebpackConfig('Modern'))
     }
 
-    // Server
-    let serverConfig = null
     if (options.build.ssr) {
-      serverConfig = new ServerConfig(this).config()
-      compilersOptions.push(serverConfig)
-    }
-
-    for (const p of this.buildContext.plugins) {
-      // Client config
-      if (!clientConfig.resolve.alias[p.name]) {
-        clientConfig.resolve.alias[p.name] = p.mode === 'server' ? './empty.js' : p.src
-      }
-
-      // Modern config
-      if (modernConfig && !modernConfig.resolve.alias[p.name]) {
-        modernConfig.resolve.alias[p.name] = p.mode === 'server' ? './empty.js' : p.src
-      }
-
-      // Server config
-      if (serverConfig && !serverConfig.resolve.alias[p.name]) {
-        serverConfig.resolve.alias[p.name] = p.mode === 'client' ? './empty.js' : p.src
-      }
+      webpackConfigs.push(this.getWebpackConfig('Server'))
     }
 
     // Check styleResource existence
@@ -96,8 +76,8 @@ export class WebpackBundler {
     }
 
     // Configure compilers
-    this.compilers = compilersOptions.map((compilerOptions) => {
-      const compiler = webpack(compilerOptions)
+    this.compilers = webpackConfigs.map((config) => {
+      const compiler = webpack(config)
 
       // In dev, write files in memory FS
       if (options.dev) {

packages/webpack/src/config/client.js

@@ -74,6 +74,19 @@ export default class WebpackClientConfig extends WebpackBaseConfig {
     return minimizer
   }
 
+  alias() {
+    const aliases = super.alias()
+
+    for (const p of this.buildContext.plugins) {
+      if (!aliases[p.name]) {
+        // Do not load server-side plugins on client-side
+        aliases[p.name] = p.mode === 'server' ? './empty.js' : p.src
+      }
+    }
+
+    return aliases
+  }
+
   plugins() {
     const plugins = super.plugins()
     const { buildOptions, options: { appTemplatePath, buildDir, modern, rootDir, _typescript = {} } } = this.buildContext

packages/webpack/src/config/index.js

@@ -1,3 +1,3 @@
-export { default as ClientConfig } from './client'
-export { default as ModernConfig } from './modern'
-export { default as ServerConfig } from './server'
+export { default as Client } from './client'
+export { default as Modern } from './modern'
+export { default as Server } from './server'

packages/webpack/src/config/server.js

@@ -53,6 +53,19 @@ export default class WebpackServerConfig extends WebpackBaseConfig {
     }
   }
 
+  alias() {
+    const aliases = super.alias()
+
+    for (const p of this.buildContext.plugins) {
+      if (!aliases[p.name]) {
+        // Do not load client-side plugins on server-side
+        aliases[p.name] = p.mode === 'client' ? './empty.js' : p.src
+      }
+    }
+
+    return aliases
+  }
+
   plugins() {
     const plugins = super.plugins()
     plugins.push(