前言今天来说说Webpack配置环境变量，那么环境变量有什么作用呢。我们在开发项目中都会遇到这种场景，区分“开发环境”、“生产环境”和“测试环境”，不同的场景请求不同的接口API。这时候就会出现工程中配置的“环境变量”~下面说说配置环境变量的方法。配置方法Set或Export有一个棘手的问题，windows和mac使用的方法还是不一样的，不同系统使用的启动项要改代码，有点不爽，一起来看看吧。"package.json"windows系统配置如下{"scripts":{"dev":"setNODE_ENV=dev&&nodeindex.js"}}mac系统配置如下{"scripts":{"dev":"exportNODE_ENV=dev&&nodeindex.js"}}"Effect"webpack.config.js文件console.log(process.env.NODE_ENV)//dev这种配置方式如果在windows模式下配置的话，mac电脑启动会出现问题，我们必须手动更改，非常麻烦。Cross-env插件就是为了解决我们上面提到的问题（不同的系统使用不同的配置方式）。这个插件叫做“跨平台环境变量”，是一套两端兼容的代码。下面以“安装”npmicross-env-D为例，在工程{"scripts":{"dev:serve":"setNODE_ENV=baidu.com&&npxwebpack-dev-server--config=下的package.json中进行配置。/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中得到的是未定义的。"有个坑-误会""webpack.config.js"console.log(process.env.NODE_ENV)//baidu.commodule.exports={mode:"development"}"main.js"console.log(process.env.NODE_ENV)//development咦，这次main.js中的环境变量又改成了development了。这是因为浏览器环境中的NODE_ENV是webpack中的模式。webpack-dev-server默认是--mode=developmentwebpack默认是--mode=production在浏览器环境下使用。借助Webpack提供的内置插件全局变量，我们来配置一下。"webpack.config.js"console.log(process.env.NODE_ENV)//baidu.comconstwebpack=require("webpack")module.exports={mode:"development",plugins:[newwebpack.DefinePlugin({"process.env.NODE_ENV":JSON.stringify(process.env.NODE_ENV)})]}「main.js」console.log(process.env.NODE_ENV)//baidu.com这时候再看，cross-envglobalvariables模式已被覆盖。上面的JSON.stringify是为了防止解析成一个变量。现在可以在全局项目中自由使用环境变量了~。本文转载自微信公众号“前端娱乐圈”，可通过以下二维码关注。转载本文请联系前端娱乐圈公众号。
