如何在Webpack中分别配置开发环境与生产环境的输出打包文件

解决方案 #

你配置中写的outputProduction不是Webpack支持的官方配置字段，不会生效，可通过以下方式快速实现需求：

第一步：修改webpack.config.js

Webpack支持配置文件导出函数，函数可直接获取当前执行的mode参数，据此动态设置输出文件名：

// 替换原来的导出对象为导出函数
module.exports = (env, argv) => {
  const isProduction = argv.mode === 'production'

  return {
    context: __dirname,
    entry: './src/index.js',
    output: {
      path: __dirname + '/dist',
      // 动态指定输出文件名
      filename: isProduction ? 'prod.js' : 'bundle.js'
    },
    // 其他原有loader、plugin等配置正常写在这个返回对象里即可
  }
}

第二步：无需修改现有npm脚本

你当前package.json里的脚本配置已经符合要求，直接执行即可：

• npm run dev 开发模式，产物输出为./dist/bundle.js
• npm run prod 生产模式，产物输出为./dist/prod.js

内容的提问来源于stack exchange，提问作者Squishy