webpack 配置 process.env 获取命令行参数

前端开发工作中可能会遇到这样的需求：本地开发、测试环境、客户的线上环境等对应的服务器地址不一样，例如本地localhost开发、打包到测试环境要换成192开头的地址、打包到线上环境要带https的地址，这个时候如果直接去改配置服务器地址的文件，那就需要改一个打包一次，很麻烦，最好是能通过 npm run xxx 的形式实现。

实现方式分为4个步骤：

1. 确定 webpack 从命令行获取的参数名称 ，这里我定为 http_env。刚开始我是定为NODE_ENV，但是新版本的 webpack 打包的时候会根据 mode 选项来设置NODE_ENV，所以最好是定一个跟 NODE_ENV 不一样的参数名称。
2. 修改 webpack 配置文件中的 plugins 选项 ，代码：

   plugins: [
    new webpack.DefinePlugin({
       'process.env': {
           'http_env': JSON.stringify(process.env.http_env)
       }
    })
   ]
   

3. 修改 package.json 配置文件中的 scripts 选项，代码：

   "build": "cross-env http_env=production webpack --config ./build/webpack.prod.config.js",
   "start": "cross-env http_env=development webpack-dev-server --config ./build/webpack.dev.config.js",
   "hk": "cross-env http_env=hk webpack --config ./build/webpack.prod.config.js"
   

4. 修改 配置服务器地址的文件, 代码：

   const ENV = process.env.http_env
   
   var apiAddr = 'http://192.168.1.201:8080/'
   var wsAddr = 'ws://192.168.1.201:8080/'
   
   if(ENV === 'production') {
    apiAddr = 'http://192.168.1.201/'
    wsAddr = 'ws://192.168.1.201/'
   } else if(ENV === 'hk') {
      apiAddr = 'https://test.hk'
    wsAddr = 'wss://test.hk'
   }
   
   export {
    apiAddr,
    wsAddr
   }