Nuxt/lib/builder/webpack/client.js

import path from 'path'

import webpack from 'webpack'
import HTMLPlugin from 'html-webpack-plugin'
import BundleAnalyzer from 'webpack-bundle-analyzer'
import TerserWebpackPlugin from 'terser-webpack-plugin'
import OptimizeCSSAssetsPlugin from 'optimize-css-assets-webpack-plugin'
import FriendlyErrorsWebpackPlugin from '@nuxtjs/friendly-errors-webpack-plugin'

import VueSSRClientPlugin from './plugins/vue/client'
import WebpackBaseConfig from './base'

export default class WebpackClientConfig extends WebpackBaseConfig {
  constructor(builder) {
    super(builder, { name: 'client', isServer: false })
  }

  env() {
    return Object.assign(super.env(), {
      'process.env.VUE_ENV': JSON.stringify('client'),
      'process.browser': true,
      'process.client': true,
      'process.server': false
    })
  }

  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()

    // Generate output HTML for SSR
    if (this.options.build.ssr) {
      plugins.push(
        new HTMLPlugin({
          filename: '../server/index.ssr.html',
          template: this.options.appTemplatePath,
          minify: true,
          inject: false // Resources will be injected using bundleRenderer
        })
      )
    }

    plugins.push(
      new HTMLPlugin({
        filename: '../server/index.spa.html',
        template: this.options.appTemplatePath,
        minify: true,
        inject: true,
        chunksSortMode: 'dependency'
      }),
      new VueSSRClientPlugin({
        filename: '../server/vue-ssr-client-manifest.json'
      }),
      new webpack.DefinePlugin(this.env())
    )

    if (this.options.dev) {
      // TODO: webpackHotUpdate is not defined: https://github.com/webpack/webpack/issues/6693
      plugins.push(new webpack.HotModuleReplacementPlugin())
    }

    // Webpack Bundle Analyzer
    // https://github.com/webpack-contrib/webpack-bundle-analyzer
    if (!this.options.dev && this.options.build.analyze) {
      const statsDir = path.resolve(this.options.buildDir, 'stats')

      plugins.push(new BundleAnalyzer.BundleAnalyzerPlugin(Object.assign({
        analyzerMode: 'static',
        defaultSizes: 'gzip',
        generateStatsFile: true,
        openAnalyzer: !this.options.build.quiet,
        reportFilename: path.resolve(statsDir, 'client.html'),
        statsFilename: path.resolve(statsDir, 'client.json')
      }, this.options.build.analyze)))
    }

    return plugins
  }

  extendConfig() {
    const config = super.extendConfig(...arguments)

    if (!this.options.dev && !config.optimization.minimizer) {
      config.optimization.minimizer = []

      // https://github.com/webpack-contrib/terser-webpack-plugin
      const terserJsPlugin = new TerserWebpackPlugin({
        parallel: true,
        cache: this.options.build.cache,
        sourceMap: config.devtool && /source-?map/.test(config.devtool),
        extractComments: {
          filename: 'LICENSES'
        },
        terserOptions: {
          output: {
            comments: /^\**!|@preserve|@license|@cc_on/
          }
        }
      })
      config.optimization.minimizer.push(terserJsPlugin)

      // https://github.com/NMFR/optimize-css-assets-webpack-plugin
      // https://github.com/webpack-contrib/mini-css-extract-plugin#minimizing-for-production
      // TODO: Remove OptimizeCSSAssetsPlugin when upgrading to webpack 5
      if (this.options.build.extractCSS) {
        const optimizeCSSPlugin = new OptimizeCSSAssetsPlugin({})
        config.optimization.minimizer.push(optimizeCSSPlugin)
      }
    }

    return config
  }

  config() {
    const config = super.config()

    // Entry points
    config.entry = {
      app: [path.resolve(this.options.buildDir, 'client.js')]
    }

    // Add HMR support
    if (this.options.dev) {
      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, '/')
      )
    }

    // Add friendly error plugin
    if (this.options.dev && !this.options.build.quiet) {
      config.plugins.push(
        new FriendlyErrorsWebpackPlugin({
          clearConsole: true,
          logLevel: 'WARNING'
        })
      )
    }

    return config
  }
}