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添加一个依赖。

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

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章