webpack区分环境-webpack配置环境变量——防止踩坑

前言

明天我会讲Webpack配置环境变量，那么环境变量有什么用呢？ 我们在开发项目中会遇到这些场景，区分开发环境、生产环境、测试环境，不同的场景需要不同的socket API。 这时候就会出现项目中配置的环境变量了~下面说一下配置环境变量的方法。

配置方法SetorExport

这种方法比较棘手的问题是windows和mac使用的方法还是不一样的，需要修改代码才能使用不同系统的启动项。 这有点悲伤，我们来看一下。

包.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的形式配置的话webpack区分环境，用mac笔记本启动就会出现问题，而且我们还要自动修改，非常繁琐。

跨环境

这个插件就是为了解决我们前面提到的问题（不同的系统使用不同的配置形式）。 这个插件叫“跨平台环境变量”，意思是一套两端兼容的代码。接下来我们来案例

安装

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中，可以清楚地看到复制结果是未定义的。 为什么是这样？ 因为当前的环境变量只在node环境中有效webpack区分环境，在浏览器中无效，所以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中的模式。

注意这里的坑，防止出错。

回到正题，既然跨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

这时候再看，跨环境的全局变量已经覆盖了模式，而里面的JSON.stringify是为了避免解析成变量。 现在你可以在全局项目中随意使用环境变量了~。