webpack设置自定义环境变量以区分打包后不同环境不同输出

你有没有遇到过这样的情况！比如你们有四种（或更多）环境：开发环境（本地调式代码环境）、测试环境（脏数据环境）、预生产环境（无限接近生产环境）、生产环境（正式环境或线上环境）等等环境。而对于不同环境你的静态资源host地址或者你的微信appid等等可能是不一样的。关于这个问题我之前大概经历了三个阶段。

第一阶段：

每次发布，都去注释修改。比如：

第二阶段：

通过window.location.host来判断。比如：

第三阶段：

通过process.env.NODE_ENV来判断。比如：

目前进入第四阶段，就是用webpack的DefinePlugin，其实这个早就有了，只是自己没去仔细看，感觉自己好渣渣

（其实本来就很渣渣

，也会一直渣渣下去

，在渣渣的路上越走越远

）。

第四阶段：

废话说了很多，进入正题：

比如上面的第三阶段通过process.env.NODE_ENV来判断，只能区分开发环境和发布环境，这个发布环境可能有 测试环境、预生产环境、生产环境，那怎么办？我们可以设置process.env.NODE_ENV,这里我们使用 cross-env 来设置，它是跨平台的。

npm i -D cross-env

比如我们这么设置：

    "test": "cross-env NODE_ENV=test webpack",
    "per": "cross-env NODE_ENV=preproduction webpack",
    "pro": "cross-env NODE_ENV=production webpack"

然后代码这么写：

console.log(process.env.NODE_ENV);

我们执行下命令：

npm run test
npm run per
npm run pro

发现打包后都是：

这是因为webpack 配置文件里定义了，如下：

这个时候我们就需要用到 webpack的DefinePlugin了，如下设置：

new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV)
      }
    })

我们再执行下命令：

npm run test

npm run per

npm run pro

完美实现！

我们还可以自定义！

比如这样：

"test": "cross-env NODE_ENV_QDRR=test webpack",
"per": "cross-env NODE_ENV_QDRR=preproduction webpack",
"pro": "cross-env NODE_ENV_QDRR=production webpack"

执行上面的三条命令，也会等到相同的结果：

本文完！

感谢童鞋们支持，希望对你有所帮助!

如果你有什么问题,可以在下方留言给我们!