webpack环境配置之process.env

4,482 阅读1分钟

process.env

process.env就是Nodejs提供的一个API,它返回一个包含用户环境信息的对象。如果我们给Nodejs 设置一个环境变量,并把它挂载在 process.env 返回的对象上,便可以在代码中进行相应的环境判断。

设置process.env

一般通过设置package.json来实现,但是Windows 系统和Mac系统有区别。

Windows 系统

// package.json
{
  ...
  "scripts": {
    "dev": "set NODE_ENV=development  webpack-dev-server",
    "build": "set NODE_ENV=production xxx"
  }
}

Mac 系统

// package.json
{
  ...
  "scripts": {
    "dev": "export NODE_ENV=development  webpack-dev-server ",
    "build": "export NODE_ENV=production xxx"
  }
}

它们的语法都相同,在相反环境会带来问题,所以有了cross-env。 cross-env是一个跨平台设置环境变量的第三方包,它可以让你只配置一行命令,就能轻松地在多个平台设置环境变量。首先先安装

npm install --save-dev cross-env 

然后

// package.json
{
  ...
  "scripts": {
    "dev": "cross-env NODE_ENV=development  webpack-dev-server ",
    "build": "cross-env NODE_ENV=production xxx"
  }
}

使用

全局下可以使用

    //webpack.config.js
    const isProd = process.env.NODE_ENV === 'production';