expeditaea 1.0.0

package/packages/webpack/src/config/base.js

@@ -0,0 +1,538 @@
+import path from 'path'
+import consola from 'consola'
+import TimeFixPlugin from 'time-fix-plugin'
+import { escapeRegExp, cloneDeep } from 'lodash'
+import VueLoader from 'vue-loader'
+import ExtractCssChunksPlugin from 'extract-css-chunks-webpack-plugin'
+import * as PnpWebpackPlugin from 'pnp-webpack-plugin'
+import HardSourcePlugin from 'hard-source-webpack-plugin'
+import TerserWebpackPlugin from 'terser-webpack-plugin'
+import WebpackBar from 'webpackbar'
+import env from 'std-env'
+import semver from 'semver'
+import { isRelative } from 'ufo'
+
+import { TARGETS, isUrl, urlJoin, getPKG, tryResolve, requireModule, resolveModule } from '@nuxt/utils'
+
+import PerfLoader from '../utils/perf-loader'
+import StyleLoader from '../utils/style-loader'
+import WarningIgnorePlugin from '../plugins/warning-ignore'
+import { reservedVueTags } from '../utils/reserved-tags'
+
+export default class WebpackBaseConfig {
+  constructor (builder) {
+    this.builder = builder
+    this.buildContext = builder.buildContext
+    this.resolveModule = id => tryResolve(id, [this.buildContext.options.rootDir, __dirname]) || id
+  }
+
+  get colors () {
+    return {
+      client: 'green',
+      server: 'orange',
+      modern: 'blue'
+    }
+  }
+
+  get nuxtEnv () {
+    return {
+      isDev: this.dev,
+      isServer: this.isServer,
+      isClient: !this.isServer,
+      isModern: Boolean(this.isModern),
+      isLegacy: Boolean(!this.isModern)
+    }
+  }
+
+  get mode () {
+    return this.dev ? 'development' : 'production'
+  }
+
+  get target () {
+    return this.buildContext.target
+  }
+
+  get dev () {
+    return this.buildContext.options.dev
+  }
+
+  get loaders () {
+    if (!this._loaders) {
+      this._loaders = cloneDeep(this.buildContext.buildOptions.loaders)
+      // sass-loader<8 support (#6460)
+      const sassLoaderPKG = getPKG('sass-loader')
+      if (sassLoaderPKG && semver.lt(sassLoaderPKG.version, '8.0.0')) {
+        const { sass } = this._loaders
+        sass.indentedSyntax = sass.sassOptions.indentedSyntax
+        delete sass.sassOptions.indentedSyntax
+      }
+    }
+    return this._loaders
+  }
+
+  get modulesToTranspile () {
+    return [
+      /\.vue\.js/i, // include SFCs in node_modules
+      /consola\/src/,
+      /ufo/, // exports modern syntax for browser field
+      ...this.normalizeTranspile({ pathNormalize: true })
+    ]
+  }
+
+  normalizeTranspile ({ pathNormalize = false } = {}) {
+    const transpile = []
+    for (let pattern of this.buildContext.buildOptions.transpile) {
+      if (typeof pattern === 'function') {
+        pattern = pattern(this.nuxtEnv)
+      }
+      if (pattern instanceof RegExp) {
+        transpile.push(pattern)
+      } else if (typeof pattern === 'string') {
+        const posixModule = pattern.replace(/\\/g, '/')
+        transpile.push(new RegExp(escapeRegExp(
+          pathNormalize ? path.normalize(posixModule) : posixModule
+        )))
+      }
+    }
+    return transpile
+  }
+
+  getBabelOptions () {
+    const envName = this.name
+    const { buildOptions: { corejs }, options: { rootDir } } = this.buildContext
+    const options = {
+      ...this.buildContext.buildOptions.babel,
+      envName
+    }
+
+    if (options.configFile || options.babelrc) {
+      return options
+    }
+
+    if (typeof options.plugins === 'function') {
+      options.plugins = options.plugins(
+        {
+          envName,
+          ...this.nuxtEnv
+        }
+      )
+    }
+
+    // Auto detect corejs version
+    let corejsVersion = corejs
+    if (corejsVersion === 'auto') {
+      try {
+        corejsVersion = Number.parseInt(requireModule('core-js/package.json', rootDir).version.split('.')[0])
+      } catch (_err) {
+        corejsVersion = 2
+      }
+    } else {
+      corejsVersion = Number.parseInt(corejsVersion)
+    }
+
+    if (![2, 3].includes(corejsVersion)) {
+      consola.warn(`Invalid corejs version ${corejsVersion}! Please set "build.corejs" to either "auto", 2 or 3.`)
+      corejsVersion = 2
+    }
+
+    const defaultPreset = [this.resolveModule('@nuxt/babel-preset-app'), {
+      corejs: {
+        version: corejsVersion
+      }
+    }]
+
+    if (typeof options.presets === 'function') {
+      options.presets = options.presets(
+        {
+          envName,
+          ...this.nuxtEnv
+        },
+        defaultPreset
+      )
+    }
+
+    if (!options.presets) {
+      options.presets = [defaultPreset]
+    }
+
+    return options
+  }
+
+  getFileName (key) {
+    let fileName = this.buildContext.buildOptions.filenames[key]
+    if (typeof fileName === 'function') {
+      fileName = fileName(this.nuxtEnv)
+    }
+    if (this.dev) {
+      const hash = /\[(chunkhash|contenthash|hash)(?::(\d+))?]/.exec(fileName)
+      if (hash) {
+        consola.warn(`Notice: Please do not use ${hash[1]} in dev mode to prevent memory leak`)
+      }
+    }
+    if (this.buildContext.buildOptions.analyze && !fileName.includes('[name]')) {
+      fileName = '[name].' + fileName
+    }
+    return fileName
+  }
+
+  env () {
+    const env = {
+      'process.env.NODE_ENV': JSON.stringify(this.mode),
+      'process.mode': JSON.stringify(this.mode),
+      'process.dev': this.dev,
+      'process.static': this.target === TARGETS.static,
+      'process.target': JSON.stringify(this.target)
+    }
+    if (this.buildContext.buildOptions.aggressiveCodeRemoval) {
+      env['typeof process'] = JSON.stringify(this.isServer ? 'object' : 'undefined')
+      env['typeof window'] = JSON.stringify(!this.isServer ? 'object' : 'undefined')
+      env['typeof document'] = JSON.stringify(!this.isServer ? 'object' : 'undefined')
+    }
+
+    Object.entries(this.buildContext.options.env).forEach(([key, value]) => {
+      env['process.env.' + key] =
+        ['boolean', 'number'].includes(typeof value)
+          ? value
+          : JSON.stringify(value)
+    })
+    return env
+  }
+
+  output () {
+    const {
+      options: { buildDir, router },
+      buildOptions: { publicPath }
+    } = this.buildContext
+    return {
+      path: path.resolve(buildDir, 'dist', this.isServer ? 'server' : 'client'),
+      filename: this.getFileName('app'),
+      futureEmitAssets: true, // TODO: Remove when using webpack 5
+      chunkFilename: this.getFileName('chunk'),
+      publicPath: isUrl(publicPath) ? publicPath : isRelative(publicPath) ? publicPath.replace(/^\.+\//, '/') : urlJoin(router.base, publicPath)
+    }
+  }
+
+  optimization () {
+    const optimization = cloneDeep(this.buildContext.buildOptions.optimization)
+
+    if (optimization.minimize && optimization.minimizer === undefined) {
+      optimization.minimizer = this.minimizer()
+    }
+
+    return optimization
+  }
+
+  resolve () {
+    // Prioritize nested node_modules in webpack search path (#2558)
+    const webpackModulesDir = ['node_modules'].concat(this.buildContext.options.modulesDir)
+
+    const resolvePath = [
+      ...(global.__NUXT_PREPATHS__ || []),
+      this.buildContext.options.rootDir,
+      __dirname,
+      ...(global.__NUXT_PATHS__ || []),
+      resolveModule('@nuxt/vue-app'),
+      resolveModule('@nuxt/babel-preset-app')
+    ]
+    const resolvePlugins = [PnpWebpackPlugin].concat(resolvePath.map(p => PnpWebpackPlugin.moduleLoader(p)))
+
+    return {
+      resolve: {
+        extensions: ['.wasm', '.mjs', '.js', '.json', '.vue', '.jsx'],
+        alias: this.alias(),
+        modules: webpackModulesDir,
+        plugins: resolvePlugins
+      },
+      resolveLoader: {
+        modules: [
+          path.resolve(__dirname, '../node_modules'),
+          ...webpackModulesDir
+        ],
+        plugins: resolvePlugins
+      }
+    }
+  }
+
+  minimizer () {
+    const minimizer = []
+    const { terser, cache } = this.buildContext.buildOptions
+
+    // https://github.com/webpack-contrib/terser-webpack-plugin
+    if (terser) {
+      minimizer.push(
+        new TerserWebpackPlugin(Object.assign({
+          cache,
+          extractComments: {
+            condition: 'some',
+            filename: 'LICENSES'
+          },
+          terserOptions: {
+            compress: {
+              ecma: this.isModern ? 2015 : undefined
+            },
+            mangle: {
+              reserved: reservedVueTags
+            }
+          }
+        }, terser))
+      )
+    }
+
+    return minimizer
+  }
+
+  alias () {
+    return {
+      ...this.buildContext.options.alias,
+      'vue-meta': this.resolveModule(`vue-meta${this.isServer ? '' : '/dist/vue-meta.esm.browser.js'}`)
+    }
+  }
+
+  rules () {
+    const perfLoader = new PerfLoader(this.name, this.buildContext, { resolveModule: this.resolveModule })
+    const styleLoader = new StyleLoader(
+      this.buildContext,
+      { isServer: this.isServer, perfLoader, resolveModule: this.resolveModule }
+    )
+
+    const babelLoader = {
+      loader: this.resolveModule('babel-loader'),
+      options: this.getBabelOptions()
+    }
+
+    return [
+      {
+        test: /\.vue$/i,
+        loader: this.resolveModule('vue-loader'),
+        options: this.loaders.vue
+      },
+      {
+        test: /\.pug$/i,
+        oneOf: [
+          {
+            resourceQuery: /^\?vue/i,
+            use: [{
+              loader: this.resolveModule('pug-plain-loader'),
+              options: this.loaders.pugPlain
+            }]
+          },
+          {
+            use: [
+              this.resolveModule('raw-loader'),
+              {
+                loader: this.resolveModule('pug-plain-loader'),
+                options: this.loaders.pugPlain
+              }
+            ]
+          }
+        ]
+      },
+      {
+        test: /\.m?jsx?$/i,
+        exclude: (file) => {
+          file = file.split(/node_modules(.*)/)[1]
+
+          // not exclude files outside node_modules
+          if (!file) {
+            return false
+          }
+
+          // item in transpile can be string or regex object
+          return !this.modulesToTranspile.some(module => module.test(file))
+        },
+        use: perfLoader.js().concat(babelLoader)
+      },
+      {
+        test: /\.css$/i,
+        oneOf: styleLoader.apply('css')
+      },
+      {
+        test: /\.p(ost)?css$/i,
+        oneOf: styleLoader.apply('postcss')
+      },
+      {
+        test: /\.less$/i,
+        oneOf: styleLoader.apply('less', {
+          loader: this.resolveModule('less-loader'),
+          options: this.loaders.less
+        })
+      },
+      {
+        test: /\.sass$/i,
+        oneOf: styleLoader.apply('sass', {
+          loader: this.resolveModule('sass-loader'),
+          options: this.loaders.sass
+        })
+      },
+      {
+        test: /\.scss$/i,
+        oneOf: styleLoader.apply('scss', {
+          loader: this.resolveModule('sass-loader'),
+          options: this.loaders.scss
+        })
+      },
+      {
+        test: /\.styl(us)?$/i,
+        oneOf: styleLoader.apply('stylus', {
+          loader: this.resolveModule('stylus-loader'),
+          options: this.loaders.stylus
+        })
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg|webp|avif)$/i,
+        use: [{
+          loader: this.resolveModule('url-loader'),
+          options: Object.assign(
+            this.loaders.imgUrl,
+            { name: this.getFileName('img') }
+          )
+        }]
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
+        use: [{
+          loader: this.resolveModule('url-loader'),
+          options: Object.assign(
+            this.loaders.fontUrl,
+            { name: this.getFileName('font') }
+          )
+        }]
+      },
+      {
+        test: /\.(webm|mp4|ogv)$/i,
+        use: [{
+          loader: this.resolveModule('file-loader'),
+          options: Object.assign(
+            this.loaders.file,
+            { name: this.getFileName('video') }
+          )
+        }]
+      }
+    ]
+  }
+
+  plugins () {
+    const plugins = []
+    const { nuxt, buildOptions } = this.buildContext
+
+    // Add timefix-plugin before others plugins
+    if (this.dev) {
+      plugins.push(new TimeFixPlugin())
+    }
+
+    // CSS extraction)
+    if (buildOptions.extractCSS) {
+      plugins.push(new ExtractCssChunksPlugin(Object.assign({
+        filename: this.getFileName('css'),
+        chunkFilename: this.getFileName('css')
+      }, buildOptions.extractCSS)))
+    }
+
+    plugins.push(new VueLoader.VueLoaderPlugin())
+
+    plugins.push(...(buildOptions.plugins || []))
+
+    plugins.push(new WarningIgnorePlugin(this.warningIgnoreFilter()))
+
+    // Build progress indicator
+    plugins.push(new WebpackBar({
+      name: this.name,
+      color: this.colors[this.name],
+      reporters: [
+        'basic',
+        'fancy',
+        'profile',
+        'stats'
+      ],
+      basic: !buildOptions.quiet && env.minimalCLI,
+      fancy: !buildOptions.quiet && !env.minimalCLI,
+      profile: !buildOptions.quiet && buildOptions.profile,
+      stats: !buildOptions.quiet && !this.dev && buildOptions.stats,
+      reporter: {
+        change: (_, { shortPath }) => {
+          if (!this.isServer) {
+            nuxt.callHook('bundler:change', shortPath)
+          }
+        },
+        done: (buildContext) => {
+          if (buildContext.hasErrors) {
+            nuxt.callHook('bundler:error')
+          }
+        },
+        allDone: () => {
+          nuxt.callHook('bundler:done')
+        },
+        progress ({ statesArray }) {
+          nuxt.callHook('bundler:progress', statesArray)
+        }
+      }
+    }))
+
+    if (buildOptions.hardSource) {
+      // https://github.com/mzgoddard/hard-source-webpack-plugin
+      plugins.push(new HardSourcePlugin({
+        info: {
+          level: 'warn'
+        },
+        ...buildOptions.hardSource
+      }))
+    }
+
+    return plugins
+  }
+
+  warningIgnoreFilter () {
+    const filters = [
+      // Hide warnings about plugins without a default export (#1179)
+      warn => warn.name === 'ModuleDependencyWarning' &&
+        warn.message.includes('export \'default\'') &&
+        warn.message.includes('nuxt_plugin_'),
+      ...(this.buildContext.buildOptions.warningIgnoreFilters || [])
+    ]
+
+    return warn => !filters.some(ignoreFilter => ignoreFilter(warn))
+  }
+
+  extendConfig (config) {
+    const { extend } = this.buildContext.buildOptions
+    if (typeof extend === 'function') {
+      const extendedConfig = extend.call(
+        this.builder, config, { loaders: this.loaders, ...this.nuxtEnv }
+      ) || config
+
+      const pragma = /@|#/
+      const { devtool } = extendedConfig
+      if (typeof devtool === 'string' && pragma.test(devtool)) {
+        extendedConfig.devtool = devtool.replace(pragma, '')
+        consola.warn(`devtool has been normalized to ${extendedConfig.devtool} as webpack documented value`)
+      }
+
+      return extendedConfig
+    }
+    return config
+  }
+
+  config () {
+    const config = {
+      name: this.name,
+      mode: this.mode,
+      devtool: this.devtool,
+      optimization: this.optimization(),
+      output: this.output(),
+      performance: {
+        maxEntrypointSize: 1000 * 1024,
+        hints: this.dev ? false : 'warning'
+      },
+      module: {
+        rules: this.rules()
+      },
+      plugins: this.plugins(),
+      ...this.resolve()
+    }
+
+    // Clone deep avoid leaking config between Client and Server
+    const extendedConfig = cloneDeep(this.extendConfig(config))
+
+    return extendedConfig
+  }
+}