关于如何使用webpack命令行传入变量,并在全局通过process.env来调用

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/a250758092/article/details/81234419

关于这个问题着实让人头疼。对于大型的项目而言,配置太过复杂了。以下是我的需求场景及【解决方案】

由于当前的项目是在开源DEMO的基础上做的。所以里面的很多webpack配置我都不熟,简直让我生不如死。

  • 需求
    原本的DEMO分成 dev环境和pro环境。
    在打包的时候一定是pro环境,这个打包并不是单纯的webpack打包。而是把程序打包成 PC应用【electron】。
    原本DEMO的配置,在做这个打包软件的操作中就是设置成 process.env.NODE_ENV=’production’,但是我希望在使用
    NODE_ENV=’production’的情况下,再分两种情况。一种是请求我们的测试地址http.dev.com ,另一种是线上地址http.pro.com 。【因为是在DEMO基础上做,所以我不可能去更改原有的配置,里面还涉及了electron的打包配置,而不单单是webpack的打包。否则牵一发动全身,心有余力不足,所以我只能在NODE_ENV为production的情况下在增加一个变量去获取】

刚开始我每次打包软件之前总是去修改配置文件参数,到底是请求 测试地址还是线上地址。再打包,但是这样相当的麻烦。

于是我想通过webpack 命令行的方式去代替我手动更改参数。
为此查到了以下几个方案:【一下方案都没有解决我的情况,但是其中的一些问题还是要说一下】
1、直接在webpack命令行输入参数 –xxx yyy 即配置xxx参数,它的值为yyy,这样,可以通过var argv = require('yargs').argv.xxx;去获取,但是这种方式,只能在webpack.config.js的配置文件中获取,如果你希望在自己的某一个xx.js文件中调用,执行webpack命令是会报错的。而且,由于webpack版本问题,在4.x 的时候是允许通过 --的形式去传参的,但是在我的3.12.x版本中,无法这样传参,会报错

2、cross-env模块, npm i -D cross-env 模块,在package.json文件中写上
"build-main": "cross-env NODE_ENV=production http_env=production node --trace-warnings -r babel-register ./node_modules/webpack/bin/webpack --config webpack.config.main.prod.js --colors",

cross-env原本是用于跨平台的命令的。在执行webpack命令之前写上 cross-env xxx=yyy即可配置,那么即可通过process.env.xxx来访问这个变量而不需要引入 yargs等模块。但是根据我测试。貌似只有你的程序在node环境下执行才能全局获取到这个变量,否则在webpack打包的时候,也只能在webpack.config.js文件下拿到,而其他自定义JS文件还是undefined。具体情况可以自己试一试,我有点模糊了,因为查了太多资料。忘记了当时的情况。但它肯定是不符合我的需求的

解决方案

new webpack.DefinePlugin({
      http_env:JSON.stringify("parameter")
    })
    //确保你的变量值是用 JSON.stringify转换的,或者是 '"parameter"'这种形式,打包的时候会把http_env全局变量替换成 "parameter" 所以,双引号需要保留

webpack.DefinePlugin允许你定义全局变量,在自定义文件中访问它。许多人会把这个值付给process.env,比如

new webpack.DefinePlugin({
'process.env':{
      http_env:JSON.stringify("parameter")
    }
    })

这样就可以通过process.env去获取。
但是!,因为之前说的因为webpack版本的原因,我在3.12.x版本无法通过webpack命令行 通过 --去自定义传参,否则报错,所以我使用了cross-env模块去传参,那么我在webpack.config.js文件下就可以通过process.env.xxx去获取。结果我写了下面这句

//命令行中的参数(两条命令,不同文件用不同webpack配置文件打包):
//cross-env http_env=development webpack --config xxx.config.js
//cross-env http_env=development webpack --config yyy.config.js
new webpack.DefinePlugin({
'process.env':{
      http_env:JSON.stringify(process.env.http_env)
    }
    })
    //结果我在 A.js文件中正常通过process.env.http_env环境拿到了,A.js是通过 xxx.config.js webpack配置文件打包的
    //而 B.js 则无法正常获取,B.js是通过yyy.config.js webpack文件打包的
    //我想了半天没想明白,毕竟无论是xxx.config.js还是yyy.config.js都是基于
    // common.config.js配置文件通过webpack-merge合并的。为什么一个能拿到另一个拿不到呢?

最终我改写成下面这样。

new webpack.DefinePlugin({
http_env:JSON.stringify(process.env.http_env)
    })
    //我直接去掉了process.env作为key,通过A.js和 B.js自定义文件中的内容也从 process.env.http_env改成了
    //http_env,最终的打包效果全都正常输出,说明通过cross-env获取命令行参数再赋值给全局变量是有问题的。
    //理论上没什么问题,但很明显它不兼容

到此,折磨我一段时间的webpack配置有了着落了,看来还是跟不上时代啊。当时看webpack还是2.x再用的时候已是4.x

猜你喜欢

转载自blog.csdn.net/a250758092/article/details/81234419