webpack 之 DefinePlugin

对每个project，我们通常都会设置一些环境变量供程序使用。期间我们可能会遇到如下几个问题：

• 我们在开发环境，测试环境，以及prod环境上面总会有一些不同的配置，如果都将他们hard code在代码里面显然不合适，通常的做法是有个配置文件，根据不一样的环境配置不同的value. 当程序启动的时候去读取改文件；
• 不同的环境如window, linux环境变量的设置方式可能不一样

dotenv module可以帮助我们解决上面的问题，它从.env中load环境变量，并将它们存储在process.env之中，我们可以通过该object来获取.env中配置的环境变量。
具体使用步骤如下：

1. install dotenv package npm install -D dotenv
2. 在项目的根目录下创建.env文件,其中的属性以如下形式配置

NAME1=value1
NAME2=value2 

3. dotenv 是node.js的一个package,可以被node.js读取，但是不能被js读取，所以我们需要借助webpack将它们load进来，然后转换成js的全局环境变量。我们需要在webpack.config.js的首行添加如下代码
   require('dotenv').config()
   改行代码会利用我们前面按照的dotenv,将.env中的环境变量load到webpack文件的process.env对象中。
4. 通过DefinePlugin 插件，再将这些环境变量加载到js文件中，在plugins数组中添加如下项：

new webpack.DefinePlugin({ 
            NAME1: JSON.stringify(process.env.NAME1),
            NAME2: JSON.stringify(process.env.NAME2)
        })

需要注意的是这里我们需要stringify所有传进来的变量。

.env文件在webpack_dev_server启动之后是只读的，如果想让修改生效则需重启Webpack_dev_server

官方文档