环境变量的设置
在用webpack作为打包工具的项目中，环境变量共有三种：
-
node运行时的环境变量
-
webpack配置对象的环境变量
-
js运行时的环境变量
node运行时的环境变量
在node环境中，通过process.env可以获取node的全局环境信息
在windows系统中，可以通过执行以下命令设置：
set NODE_ENV=dev
在linux系统中，可以通过执行以下命令设置：
export NODE_ENV=dev
所以，我们可以在项目的package.json中设置：
"scripts": {
"start-win": "set NODE_ENV=dev && node app.js",
"start-unix": "export NODE_ENV=dev && node app.js",
}
但这样肯定不是我们想要的，能不能统一一条命令？
方法是安装cross-env
npm i -D cross-env
再在package.json中设置
"scripts": {
"start": "cross-env NODE_ENV=dev && node app.js",
}
这时就可以在所有系统中使用同一命令了。
执行命令之后，就可以在node代码中获取了
console.log(process.env.NODE_ENV) // dev
NODE_ENV只是笔者随意设置的环境变量名称，你也可以随意设置环境变量名称
webpack配置对象的环境变量
webpack配置对象的环境变量是通过webpack命令行来设置的。
从webpack4开始，webpack将webpack的命令行抽离成一个单独的npm包：webpack-cli，所以，如果要使用webpack命令行传参需要先安装webpack-cli。
npm i -D webpack-cli
通过webpack命令行传参的方式，webpack配置对象必须通过函数的方式导出。
命令行
webpack --env.NODE_ENV=local --env.production --progress
如果设置 env 变量，却没有赋值，--env.production 默认将 --env.production 设置为 true*。还有其他可以使用的语法。
webpack.config.js
module.exports = env => {
// Use env.<YOUR VARIABLE> here:
console.log('NODE_ENV: ', env.NODE_ENV) // 'local'
console.log('Production: ', env.production) // true
return {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
}
js运行时的环境变量
js本身没有环境变量一说，只是我们通过webpack打包时传入到js中并设置为js的全局变量。
方法：
使用webpack自带的插件DefinePlugin
webpack.config.js
module.exports = env => {
return {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(env.NODE_ENV)
})
]
}
}
./src/index.js
console.log(process.env.NODE_ENV) // lacal
