Webpack配置环境变量 - 避免踩坑
前言
今天来讲一下Webpack配置环境变量，置环那么环境变量是境变干啥的。我们在开发项目中都会遇到这种场景，量避区分「开发环境」、免踩「生产环境」、置环「测试环境」，境变不同场景请求不同的量避接口Api。这时候项目中配置的免踩「环境变量」就登场啦~，下面来讲一下配置环境变量的置环方式吧。
配置方法
Set or 境变Export
该方式有个棘手的问题就是windows和mac使用的方式还不同，不同系统使用启动项目还得更改代码，量避这就有点难受，免踩我们来看一下。置环
「package.json」
windows系统如下配置
{ "scripts": { "dev": "set NODE_ENV=dev && node index.js" } }mac系统如下配置
{ "scripts": { "dev": "export NODE_ENV=dev && node index.js" } }「效果」
webpack.config.js文件
console.log(process.env.NODE_ENV) // dev该配置方式如果用windows方式配置，境变用mac电脑启动这样就会有问题，量避我们还得手动更改，这样非常的繁琐。
Cross-env
该插件就是解决上面我们所说的亿华云计算问题(不同系统使用不同的配置方式)，该插件称为 "跨平台环境变量"，就是一套代码兼容两端。下面我们来案例
「安装」
npm i cross-env -D在项目下package.json中配置
{ "scripts": { "dev:serve": "set NODE_ENV=baidu.com && npx webpack-dev-server --config=./config/webpack.config.js", } }「webpack.config.js」
console.log(process.env.NODE_ENV) // baidu.com但是上面这样还有个问题是，虽然我们环境变量配置好了，但是只能在webpack.config.js里面使用。我们来到main.js文件下打印看看呢。
「main.js」
console.log(process.env.NODE_ENV) // undefined上面main.js可以清楚的看到，打印结果为undefined，这是为什么呢，是因为「当前的环境变量」，只是在node环境中生效，在浏览器中并没有，所以main.js里面获取到的是undefined。
「有坑 - 误区」
「webpack.config.js」
console.log(process.env.NODE_ENV) // baidu.com module.exports = { mode: "development" }「main.js」
console.log(process.env.NODE_ENV) // development咦，源码下载这次怎么main.js里面环境变量又变成development了，这是因为浏览器环境中NODE_ENV走的是webpack里的mode。
webpack-dev-server 默认就是 --mode=development webpack 默认就是 --mode=production❝注意这里的坑，避免出错。❞
回归主题，那么既然cross-env环境变量只能在node环境下使用，那怎么在浏览器环境下使用呢。配合Webpack提供的内置插件全局变量，我们来配置一下。
「webpack.config.js」
console.log(process.env.NODE_ENV) // baidu.com const webpack = require("webpack") module.exports = { mode: "development", plugins: [ new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV) }) ] }「main.js」
console.log(process.env.NODE_ENV) // baidu.com这时再看，cross-env全局变量已经覆盖掉mode的啦，上面JSON.stringify是防止解析成为一个变量。现在可以在全局项目中随意使用环境变量啦~。
本文转载自微信公众号「前端娱乐圈」，可以通过以下二维码关注。转载本文请联系前端娱乐圈公众号。
