当我们使用当前流行的前端框架如ng react vue 进行开发时，不可避免的会配置许多地址，而且这些地址再开发环境下和测试环境下是不一样的，

如果我们每次打包都需要修改一遍配置文件的话，第一，效率低容易遗忘，第二，身为程序员对做这种事情感觉非常的反感，能自动化的过程完全不想手动...

于是进行环境的区分是非常有必要的，

开发环境和生产环境一般只有一个，然而测试环境却有好多，
这时我们可以通过webpack 对环境进行区分，通过package.json中的脚本配置将不同的环境配置到webpack中，webpack将环境注入到代码中，于是便能打包不同环境时运行不同的脚本，从而完成环境的区分功能

直接上代码
package.json 配置

     "scripts": {
        "dev": "set type=dev&webpack-dev-server --content-base ./ --host localhost --open --inline --hot --compress --colors --config build/webpack.dev.config.js",
        "build": "set type=build&webpack --progress --hide-modules --config build/webpack.prod.config.js",
        "7002": "set type=7002&webpack --progress --hide-modules --config build/webpack.prod.config.js",
        "7004": "set type=7004&webpack --progress --hide-modules --config build/webpack.prod.config.js",
        "7006": "set type=7006&webpack --progress --hide-modules --config build/webpack.prod.config.js",
        "7008": "set type=7008&webpack --progress --hide-modules --config build/webpack.prod.config.js"
  },

package.json脚本向webpack注入 type 环境变量，webpack中通过DefinePlugin插件 将变量注入到前端代码中，

    new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"'+process.env.type+'"'
            }
        }),

这个插件再使用时，注入的字符串值必须是双引号包裹，所以通过字符串拼接一下

然后就可以在代码中，通过

env:process.env.NODE_ENV=="dev"?"dev":'prod',

来获取不同环境下所配置的不同变量了，，然后根据process.env.NODE_ENV（这个值的名称可以随便取)的值来选择接口调用的不同地址，环境区分完成，

例如开头package.json中的配置，如果需要打包7002下的包只需要npm run 7002 需要打包7004环境下的包只需要npm run 7004，

然而当我在mac电脑下 checkout这个项目后却发现，环境区分失败了，，因为windows下使用set注入环境变量，而类unix系统下使用export注入环境变量，于是将 package.json中的set 改为export 然而还是不好使。。

最后经过多次尝试,找到了mac下注入变量的方法，代码如下

    "scripts": {
        "dev": "type=dev webpack-dev-server --content-base ./ --host localhost --open --inline --hot --compress --colors --config build/webpack.dev.config.js",
        "build": "type=build webpack --progress --hide-modules --config build/webpack.prod.config.js",
        "7002": "type=7002 webpack --progress --hide-modules --config build/webpack.prod.config.js",
        "7004": "type=7004 webpack --progress --hide-modules --config build/webpack.prod.config.js",
        "7006": "type=7006 webpack --progress --hide-modules --config build/webpack.prod.config.js",
        "7008": "type=7008 webpack --progress --hide-modules --config build/webpack.prod.config.js"
  },