process.env.NODE_ENV
process对象是全局变量，它提供当前node.js的有关信息，以及控制当前node.js的有关进程。因为是全局变量，它对于node应用程序是始终可用的，无需require()。
NODE_ENV不是process.env对象上原有的属性，它是我们自己添加上去的一个环境变量，用来确定当前所处的开发阶段。
// package.json "start": "NODE_ENV=production node build.js" // set NODE_ENV=production node build.js //windows
env
要在开发和生产构建之间，消除 webpack.config.js 的差异，你可能需要环境变量。
webpack 命令行环境配置中，通过设置 --env 可以使你根据需要，传入尽可能多的环境变量。在 webpack.config.js 文件中可以访问到这些环境变量。例如，--env.production 或 --env.NODE_ENV=local（NODE_ENV 通常约定用于定义环境类型，查看这里）。
// package.json "build": "NODE_ENV=dev webpack --env=dev --config ./webpack.config.js"
然而，你必须对 webpack 配置进行一处修改。通常，module.exports 指向配置对象。要使用 env 变量，你必须将 module.exports 转换成一个函数：
// webpack.config.js
module.exports = env => {
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')
}
}
}
综合使用
1.安装cross-env兼容不同系统
npm i cross-env --save-dev
2.在package.json中scripts里定义NODE_ENV留作全局使用，定义env留作webpack配置文件中使用。
// package.json
"scripts": {
"build:dev": "cross-env NODE_ENV=dev webpack --env=dev --config ./webpack.config.js",
"build:test": "cross-env NODE_ENV=test webpack --env=test --config ./webpack.config.js"
},
3.在webpack配置文件中使用env，使用内置的DefinePlugin全局化process.env.NODE_ENV,与最外层的package.json保持同步。
// webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = env => {
// 这里可以使用env了
console.log(env)
return {
mode: 'production',
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
plugins:[
new webpack.DefinePlugin({
// 这里要JSON.stringify包装下
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
})
]
};
};
4.在全局代码中可以使用process.env.NODE_ENV判断环境了
// index.js
console.log(process.env.NODE_ENV)
if(process.env.NODE_ENV === 'dev'){
console.log('this dev')
}else if (process.env.NODE_ENV === 'test'){
console.log('test')
}