webpack相关配置

process.env

process是什么？

官方：http://nodejs.cn/api/process.html
process 对象是一个全局变量，它提供有关当前 Node.js 进程的信息并对其进行控制。 作为一个全局变量，它始终可供 Node.js 应用程序使用，无需使用 require()。

env又是什么？

process.env 属性返回包含用户环境的对象
详见官网：http://nodejs.cn/api/process.html#process_process_env
示例如下：

{
  TERM: 'xterm-256color',
  SHELL: '/usr/local/bin/bash',
  USER: 'maciej',
  PATH: '~/.bin/:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin',
  PWD: '/Users/maciej',
  EDITOR: 'vim',
  SHLVL: '1',
  HOME: '/Users/maciej',
  LOGNAME: 'maciej',
  _: '/usr/local/bin/node'
}

实际开发中，我们需要根据不同环境（开发、测试、生产），处理不同的逻辑（切换域名，获取不同变量等）；
webpack官方配置就是根据process.env区分；
process.env就是Nodejs提供的一个API，它返回一个包含用户环境信息的对象。如果我们给Nodejs 设置一个环境变量，并把它挂载在 process.env 返回的对象上，便可以在代码中进行相应的环境判断

如何使用？

新建一个环境变量NODE_ENV，一般生产为pro，开发为dev，测试为stg；
在脚本中读取process.env.NODE_ENV即可。
NODE_ENV 这个名称只是大家约定俗成的，是可以修改的（比如react项目中：REACT_APP_NODE_ENV）

首先，在webpack项目里，修改package.json；

• • Windows 系统

{
  "private": true,
  "scripts": {
    "dev": "set NODE_ENV=development &&  webpack-dev-server --open --hot",
    "build": "set NODE_ENV=production &&   --progress --hide-modules"
  }
}

• • Mac 系统

{
  "private": true,
  "scripts": {
    "dev": "export NODE_ENV=development &&  webpack-dev-server --open --hot",
    "build": "export NODE_ENV=production &&   --progress --hide-modules"
  }
}

由于mac和window系统的语法不同，跨平台设置环境变量的第三方包cross-env应运而生；它可以让你只配置一行命令，就能轻松地在多个平台设置环境变量

npm install --save-dev cross-env 

• • cross-env 兼顾mac和window 配置语法

{
  "private": true,
  "scripts": {
    "start": "cross-env NODE_ENV=dev umi dev",
    "start_test": "cross-env NODE_ENV=test umi dev",
    "start_prod": "cross-env NODE_ENV=prod umi dev",
    "build": "cross-env NODE_ENV=prod umi build",
    "build_dev": "cross-env NODE_ENV=dev umi build",
    "build_test": "cross-env NODE_ENV=test umi build",
  },
}