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是防止解析成为一个变量。现在可以在全局项目中随意使用环境变量啦~。

我是蛙人，我们下篇见。

公众号：前端娱乐圈

感谢

谢谢你读完本篇文章，希望对你能有所帮助，如有问题欢迎各位指正。

我是蛙人(✿◡‿◡)，如果觉得写得可以的话，请点个赞吧❤。

感兴趣的小伙伴可以加入 [ 前端娱乐圈交流群 ] 欢迎大家一起来交流讨论

写作不易，「点赞」+「在看」+「转发」 谢谢支持❤

往期好文

《聊聊在Vue项目中使用Decorator装饰器》

《分享15个Webpack实用的插件！！！》

《手把手教你写一个Vue组件发布到npm且可外链引入使用》

《分享12个Webpack中常用的Loader》

《聊聊什么是CommonJs和Es Module及它们的区别》

《这些工作中用到的JavaScript小技巧你都知道吗？》

《【建议收藏】分享一些工作中常用的Git命令及特殊问题场景怎么解决》