webpack 相关

简单的配置方式

configureWebpack 对象写法，该对象将会被 webpack-merge 合并入最终的 webpack 配置。

module.exports = {
  configureWebpack: {
    plugins: [
      // 配置插件
    ],
    resolve: {
      // 配置别名
      alias: {
        '@': '/src',
      },
    },
    // 修改其他 Webpack 配置
    // ...
  },
}

如果需要基于环境有条件地配置行为，或者想要直接修改配置，那就换成一个函数 (该函数会在环境变量被设置之后懒执行)。

在函数内，可以直接修改配置，或者返回一个将会被合并的对象。

module.exports = {
  // config 是已经解析好的 webpack 配置
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
    } else {
      // 为开发环境修改配置...
    }
  },
}

注意

有些 webpack 选项是基于 vue.config.js 中的值设置的，所以不能直接修改。例如：

• 你应该修改 vue.config.js 中的 outputDir 选项而不是修改 output.path；
• 你应该修改 vue.config.js 中的 publicPath 选项而不是修改 output.publicPath。

这样做是因为 vue.config.js 中的值会被用在配置里的多个地方，以确保所有的部分都能正常工作在一起。

链式操作 (高级)

chainWebpack 是基于 webpack-chain 库，这个库提供了一个 webpack 原始配置的上层抽象，使其可以定义具名的 loader 规则和具名插件，并有机会在后期进入这些规则并对它们的选项进行修改。

module.exports = {
  chainWebpack: config => {
    // 修改 output 配置
    config.output.filename('js/[name].[contenthash].js').chunkFilename('js/[name].[contenthash].js')

    // 添加插件
    config.plugin('html').tap(args => {
      args[0].title = 'Custom Title' // 修改 HTML 模板中的标题
      return args
    })

    // 修改其他 Webpack 配置，例如别名
    config.resolve.alias.set('@', '/src')
  },
}

审查项目的 webpack 配置

vue inspect > output.js