webpack4环境配置之process.env

作者：littleTank
链接：https://www.jianshu.com/p/19d199f93045

webpack是npm生态中的一个模块，webpack的运行依赖于node的环境，没有node是不能打包的。这里的process.env就是Nodejs提供的一个API，它返回一个包含用户环境信息的对象。如果我们给Nodejs 设置一个环境变量，并把它挂载在 process.env 返回的对象上，便可以在代码中进行相应的环境判断。

process.env
process.env属性返回一个对象，包含了当前Shell的所有环境变量。比如，process.env.HOME返回用户的主目录。

通常的做法是，新建一个环境变量NODE_ENV，用它确定当前所处的开发阶段，生产阶段设为production，开发阶段设为development或staging，然后在脚本中读取process.env.NODE_ENV即可。
要说明的是，NODE_ENV 这个名称只是开发社区的一种共识，名称内容是可以修改的。如果需要，你也可以把它定义为 NODE_abc或者xxx都行。下边我们按照约定就以NODE_ENV来说。

在Webpack配置文件中，经常会看到如下类似的代码：

// webpack.config.js
module.exports = {
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development'
}
process.env是Nodejs提供的一个API，那么如果想用process.env.NODE_ENV，就必须先设置其值才能用。
但是如何设置这个process.env.NODE_ENV环境变量呢？在webpack项目里，我们可以通过设置package.json来实现，但是Windows 系统和Mac系统有区别。

Windows 系统

// package.json
{
...
"scripts": {
"dev": "set NODE_ENV=development && webpack-dev-server --open --hot",
"build": "set NODE_ENV=production && --progress --hide-modules"
}
}
Mac 系统

// package.json
{
...
"scripts": {
"dev": "export NODE_ENV=development && webpack-dev-server --open --hot",
"build": "export NODE_ENV=production && --progress --hide-modules"
}
}
但它们的语法都不尽相同。这就带来两个问题：
那么问题又来了，我在Windows 开发部署的项目，可能在 Mac 系统无法正常打包，反之亦然。为了解决这个问题，有人就开发了 cross-env。

cross-env是一个跨平台设置环境变量的第三方包，它可以让你只配置一行命令，就能轻松地在多个平台设置环境变量。首先先安装

npm install --save-dev cross-env
然后配置package.json就可以了

// package.json
{
...
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --mode=production --progress --hide-modules"
},
}
这样我们就可以在项目里取到process.env.NODE_ENV的值，然后利用这个值来区分当前环境。

最后编辑于：2020.10.27 14:34:34