webpack按环境打包在平时的开发中，多套环境的后端API地址等配置往往是不同的，一般需要维护好几套配置文件，这就容易

前景

在平时的开发中，多套环境的后端API地址等配置往往是不同的，一般需要维护好几套配置文件，这就容易造成环境代码的不同意，增大出错的风险，其实可以借助webpack帮助我们根据不同的环境打包出不同的最终代码。

原理

webpack.DefinePlugin插件可以在打包运行阶段提供全局变量的能力，因此可以通过定义的全局变量在打包阶段将配置信息打进最终的包。

使用示例

webpack.prod.js

cosnt env = {
	BASE_URL = '"/imgs-upload"'   // 注意不能直接使用"/imgs-upload" 或 '/imgs-upload'
}
module.exports = {
  ...
  plugins: [
        new webpack.DefinePlugin({
            'process.env': env
        })
  ]
}

main.js

...
const BASE_URL = process.env.BASE_URL;
...

这样，const BASE_URL = "/imgs-upload"就会被直接打包进最终的代码。