开发中,我们通常根据环境变量对不同环境配置文件进行区别配置或merge组合。
通常设置环境变量可以使用 cross-env 来跨平台设置(windows 使用 set,linux 使用 export)如下图
这样我们就可以在 webpack 打包时通过process.env.BUILD_ENV获取到对应的值,进行打包模式的区分,或者不同 loader 的使用,比如:mode: process.env.BUILD_ENV === 'production' ? 'production' : 'development'
需要注意的是,以上代码的是运行在 webpack 编译时,如果想在项目运行环境使用process.env.BUILD_ENV需要进行以下配置:
new webpack.DefinePlugin({
'process.env': JSON.stringify(process.env)
}),
new webpack.ProvidePlugin({
process: 'process/browser' // 必须配置,不然会报错【Uncaught ReferenceError: process is not defined】
})
这时我们就可以在运行环境中使用process
// global.config.js
export const isDev = process.env.BUILD_ENV === 'development'
或者我们可以在webpack.DefinePlugin中直接定义BUILD_ENV,这样运行环境 js 中可以使用BUILD_ENV来替代process.env.BUILD_ENV
new webpack.DefinePlugin({
'process.env': JSON.stringify(process.env),
BUILD_ENV: JSON.stringify(process.env.BUILD_ENV)
})
文中之所以没有使用NODE_ENV,是防止一些第三方库中使用NODE_ENV进行判断,而我们对其值进行了更改而出现异常