mode的基础介绍
通过选择 development, production 或 none 之中的一个,来设置 mode 参数,你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。
只需在配置对象中提供 mode 选项:
mode: 'production',
};
或者从 CLI 参数中传递:
webpack --mode=development
问题来了
使用上面任何一种配置,在模块中虽然能够拿到process.env.NODE_ENV,但是在webpack.config.js中拿不到,打印及输出如下:
配置文件中:
模块中打印结果:
为保证在配置文件和模块中都能拿到这个环境变量,需改变配置如下
NODE_ENV=development webpack
如上配置,打印结果如下:
如此在模块中、配置文件中就可以同时拿到环境变量了。
注意:在进行“NODE_ENV=development webpack”配置时候,在大多数Windows命令行中在使用NODE_ENV = production设置环境变量时会报错。同样,Windows和Linux命令如何设置环境变量也有所不同。所以需要使用
cross-env来支持跨平台设置和使用环境变量的脚本,这样可以设置在不同的平台上有相同的NODE_ENV参数。
配置如下:
cross-env NODE_ENV=development webpack
用途
根据不同的环境进行不同的配置,如不同环境的域名不同,我们就可以利用 DefinePlugin(https://www.webpackjs.com/plugins/define-plugin/)进行配置
config/env.js
const env = process.env.NODE_ENV;
const config = {
development: {
loginApi: 'www.abc-login-test.com',
orderApi: 'www.abc-order-test.com'
},
production: {
loginApi: 'www.abc-login.com',
orderApi: 'www.abc-order.com'
}
};
module.exports = config[env];
webpack.config.js
const envConfig= require('./config/env');
module.exports = {
...
plugins: [
new webpack.DefinePlugin({
envConfig: JSON.stringify(envConfig)
})
]
...
}
index.js
console.log(envConfig)
打印结果如下:
总结: