webpck 中添加环境变量

如何在webpack构建的项目中添加环境的变量？

需求是这样的，需要在项目打包之后文件的引入添加绝对的路径，而不是相对的路径。

比如，打包完成的文件，可能是用来测试用的，测试的地址是aaa.yourcompany.com，而正式环境的地址是bbb.yourcompany.com，这个时候我们往往是用npm run build 来构建项目。那么，因为webpack中没有window环境，就不可能获得它的host，只能够用node的一些方式进行处理了。

有一个控件非常好用，那就是cross-env。

操作步骤如下：

1、首先安装cross-env：

npm install --save-dev cross-env

2、在你的json文件中使用，往往是package.json文件:

"scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.dev.js --mode development",
    "build": "cross-env NODE_ENV=production webpack --config webpack.prod.js --mode production",
    "build:ldwl": "cross-env NODE_ENV=productionldwl webpack --config webpack.prod.js --mode production"
     ...
}

3、process.env.NODE_ENV获取到上一步骤的环境变量（development、production、productionldwl）：

const NODE_ENV = process.env.NODE_ENV//环境变量
console.log(NODE_ENV )

4、获取了环境变量就可以在打包的时候随心所欲了。比如说：

npm run build:ldwl

就会构建过程中在控制台上（日志中）打印出了：productionldwl。然后自己去判断输出的绝对地址吧！

注意点： 如果环境变量没有添加，是不能够从日志上看到process.env.NODE_ENV的值的，那个时候它还是undefined呢；cross-env是快速添加依赖的方式，如果想要手动添加，需要在webpack中的plugins添加一个依赖。

这样就可以在打包的时候区分好环境，上线的文件可以直接引用绝对的上线地址了。