在使用webpack对项目进行打包构建的时候一般都会区分开发环境和生产环境，这样做的好处不言而喻，我们可以在不同的环境做一些不同的配置，例如生产环境为了减轻代码体积会做一些压缩之类的优化；而开发环境为了方便我们开发调试，需要做一些代码检查，模块热更新之类的配置。因此，针对这两类环境我们也有一些固定的配置项。怎样在执行时根据环境的不同读取这些配置项并把他们加入到环境变量中去呢？如果直接在代码中写肯定不是一个好方法。这里就引出来今天我们要讲的第一个包: dotenv，可以帮助我们将环境之外的配置独立于代码之外。

dotenv

使用dotenv时，我们可以先将环境的配置写在单独的.env文件中，如下图所示：

截屏2022-03-16 下午2.21.36.png

使用的时候：

截屏2022-03-16 下午2.23.14.png

然后让我们来执行这个文件，得到的结果：

截屏2022-03-16 下午2.26.06.png

可以看出，我们之前在.env文件中设置一些配置项已经被注入到process.env中，可以方便我们随时读取。

webpack.DefinePlugin

这时，我们虽然把于环境相关的配置项放入process.env中去了，但是，我们的浏览器环境不是node，无法读取process.env中的变量，如果我们在代码中也想根据不同的环境做一些不同的操作怎么办呢？不用担心，webpack早就给我们提供了definePlugin这个内置插件，可以帮助我们定义全局变量。

    plugins:[
        new Webpack.DefineWebpackPlugin({'process.env': ...})
    ]

这样，我们就可以在代码中直接调用process.env中变量啦

截屏2022-03-16 下午2.41.27.png

cross-env

在设置环境变量时，window机器上可能不支持NODE_ENV=XXX的方式。cross-env这个包就是帮助解决这个问题的，它能够提供一个设置环境变量的scripts，让你能够以unix方式统一设置环境变量。

{
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
  }
}