ConfigureWebPack with ChainWebPack

configureWebpack

This object will bewebpack-merge Incompetentwebpack Configuration.
If you need to configure behavior based on environment, or you want to change the configuration directly, then replace it into a function (this function is lazy after the environment variable is set). The first parameter of this method receives a configuration that has parsed. In the function, you can modify the configuration directly, or return a object that will be merged:

Object-based writing:

const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir)
}

function getPlugins() {
  let plugins = []
  if (process.env.VUE_APP_ENV === 'test') {
    plugins.push(
      // Add a plugin
    )
  }
  if (process.env.VUE_APP_ENV === 'production') {
    plugins.push(
      // Add a plugin
    )
  }
  return plugins
}

module.exports = {
  publicPath: "/",
  lintOnSave: false,
  devServer: {
    // Configure the server
    port: 8086,
    open: true,
  },
  configureWebpack: {
    // Overwrite WebPack default configuration is here
    resolve: {
      // Configure the parsing alias where: @        , @ c represents the src / components folder, etc.
      alias: {
        "@": path.resolve(__dirname, "./src"),
        "@a": path.resolve(__dirname, "./src/assets"),
        "@c": path.resolve(__dirname, "./src/components"),
      }
    }
    plugins: getPlugins()
  },
};

Function type writing:

// vue.config.js

const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir)
}
function getPlugins() {
  let plugins = []
  if (process.env.VUE_APP_ENV === 'test') {
    plugins.push(
      // Add a plugin
    )
  }
  if (process.env.VUE_APP_ENV === 'production') {
    plugins.push(
      // Add a plugin
    )
  }
  return plugins
}

module.exports = {
  publicPath: "/",
  lintOnSave: false,
  devServer: {
    // Configure the server
    port: 8086,
    open: true,
  },
  configureWebpack: (config) => {

    if (process.env.NODE_ENV === 'production') {
      / / Configuration for production environment ...
      config.mode = 'production'
    } else {
      / / For the development of environment modification configuration ...
      config.mode = 'development'
    }

    // mode 1:
    // Object.assign(config, {
    //   resolve: {
    //     alias: {
    //       '@': path.resolve(__dirname, './src'),
    //       '@a': path.resolve(__dirname, './src/assets'),
    //       '@c': path.resolve(__dirname, './src/components'),
    //     }
    //   }
    //   plugins: getPlugins()
    // })

    // mode 2:
    const name = '111'
    const resolve = {
      alias: {
        '@': path.resolve(__dirname, './src'),
        '@a': path.resolve(__dirname, './src/assets'),
        '@c': path.resolve(__dirname, './src/components'),
      }
    }
    const plugins = getPlugins()
    return { name, resolve, plugins }
  }
};

chainWebpack

Vue CLI insidewebpack Configuration is passedwebpack-chain Maintain. This library provides onewebpack Originally configured upper abstraction, which can define a nameloader Rules and a list of plugins, and have the opportunity to enter these rules later and modify their options.

It allows us to control its internal configuration finer

An example of an official code:

config
  .plugin(name)
  .use(WebpackPlugin, args)

Parameter Description:

• Name iswebpack-chain The key is to join the plugin to joinwebpack-chain In the configurationkey , Is our name of our custom plugin
• WebpackPluginwebpack Insert name, here, you can use the plugin directly, no need to instantiate, it is not necessarynew WebpackPlugin()
• The parameter information of the Args plugin. pay attention,argsIs an array,E.g [{},{}] This way, you can configure multiple plug-in instances

Example:

use webpack-aliyun-oss Plug-in implementation: The project is automatically uploaded when the project is packaged.aliyun Here, here can be writtenconfigureWebpack Can also writechainWebpack in

'use strict'
const path = require('path')
const defaultSettings = require('./src/settings.js')

// Automatically upload aliyun
const WebpackAliyunOss = require('webpack-aliyun-oss')
const Oss = require('./oss')

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

function getPlugins() {
  let plugins = []
  if (process.env.VUE_APP_ENV === 'test') {
    plugins.push(
      new WebpackAliyunOss({
        from: './dist/**',
        dist: '/web/dist/',
        region: Oss.region,
        accessKeyId: Oss.accessKeyId,
        accessKeySecret: Oss.accessKeySecret,
        bucket: Oss.bucket,
        // test: true,
        setOssPath: filePath => {
          // some operations to filePath
          const index = filePath.lastIndexOf('dist')
          const Path = filePath.substring(index + 4, filePath.length)
          return Path.replace(/\\/g, '/')
        },
        setHeaders: filePath => {
          return {
            'Cache-Control': 'max-age=31536000'
          }
        }
      })
    )
  }
  if (process.env.VUE_APP_ENV === 'production') {
    plugins.push(
      new UglifyJsPlugin({ //  Production environment removal console and annotation
        uglifyOptions: {
          output: {
            comments: false //  Removal
          },
          compress: {
            // warnings: false,
            drop_debugger: true,
            drop_console: true, // console
            pure_funcs: ['console.log'] //  Remove Console
          },
        },
        sourceMap: false,
        parallel: true,
      })
    )
  }
  return plugins
}
function resolve(dir) {
  return path.join(__dirname, dir)
}

const name = defaultSettings.title || 'vue Admin Template' // page title
const port = process.env.port || process.env.npm_config_port || 9528 // dev port

module.exports = {
  publicPath: '/',
  outputDir: 'party_dist',
  assetsDir: 'static',
  lintOnSave: false,
  productionSourceMap: false,
  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      '/api': {
        target: 'xxxxxx',
        changeOrigin: true,
        pathRewrite: {
          //  Path rewriting
          '^/api': ''
        }
      }
    },
    before: require('./mock/mock-server.js')
  },
  configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    },
    // plugins: getPlugins()
  },
  chainWebpack(config) {
    config.plugin('preload').tap(() => [
      {
        rel: 'preload',
        fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
        include: 'initial'
      }
    ])
    config.plugins.delete('prefetch')

    config
      .when(process.env.NODE_ENV !== 'development',
        config => {
          config
            .plugin('ScriptExtHtmlWebpackPlugin')
            .after('html')
            .use('script-ext-html-webpack-plugin', [{
              inline: /runtime\..*\.js$/
            }])
            .end()
          config
            .optimization.splitChunks({
              chunks: 'all',
              cacheGroups: {
                libs: {
                  name: 'chunk-libs',
                  test: /[\\/]node_modules[\\/]/,
                  priority: 10,
                  chunks: 'initial'
                },
                elementUI: {
                  name: 'chunk-elementUI', // split elementUI into a single package
                  priority: 20, 
                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/ 
                },
                commons: {
                  name: 'chunk-commons',
                  test: resolve('src/components'), // can customize your rules
                  minChunks: 3, //  minimum common number
                  priority: 5,
                  reuseExistingChunk: true
                }
              }
            })
          config.optimization.runtimeChunk('single')
        }
      )
    if (process.env.VUE_APP_ENV === 'test') {
      config.plugin('WebpackAliyunOss')
        .use('webpack-aliyun-oss', [{
          from: './dist/**',
          dist: '/web/dist/',
          region: Oss.region,
          accessKeyId: Oss.accessKeyId,
          accessKeySecret: Oss.accessKeySecret,
          bucket: Oss.bucket,
          // test: true,
          setOssPath: filePath => {
            // some operations to filePath
            const index = filePath.lastIndexOf('dist')
            const Path = filePath.substring(index + 4, filePath.length)
            return Path.replace(/\\/g, '/')
          },
          setHeaders: filePath => {
            return {
              'Cache-Control': 'max-age=31536000'
            }
          }
        }]
        )
    }
  }
}

Summarize:

configureWebpack and chainWebpack There is no difference in essence, just the former configurationeasy and convenientThe latter canMore granularly controlled configuration