当前位置:首页 > webpack搭建环境 webpack多入口配置 (四)通过环境变量和definePlugin区分开发和线上环境

webpack搭建环境 webpack多入口配置 (四)通过环境变量和definePlugin区分开发和线上环境

发布于 2018-12-12 阅读 748 次 webpack

背景

接着上一篇文章,由于要频繁的将代码上传至测试服务器和开发服务器,下面我用dev和pro来代替。我是这么做的,手动修改ajax的url地址,publicPath和一些其他的dev和pro的不同变量等。能实现,确实很恶心哈,而且极易出错,一方面工作任务紧张,时间少。另一方面我又是个比较懒的人,本来想等工作告一段落,有空闲的时候再去做这些事情,后来在后台朋友的强烈建议下,实在忍无可忍,花了一上午把这个东西搞好了。

解决方案

webpack环境变量 和 defingPlugin插件
definePlugin这个插件可以定义一个global的变量,这个变量可以在业务就是就是js代码中(也就是src的js中)的任何文件被访问到。这样我们就可以轻松的区分dev和pro环境的ajax请求地址和publicPath了。
我是将dev和pro的webpack配置文件分成两个文件了,然后结合打包的时候使用不同的命令
dev.config.js里是这样配置的

  1. new webpack.DefinePlugin({
  2. DEV_MODE: JSON.stringify('development')
  3. })

pro.config.js

  1. new webpack.DefinePlugin({
  2. DEV_MODE: JSON.stringify('production'),
  3. VERSION: version
  4. })

src目录下的一个js的写法

  1. // 创建一个新的axios对象
  2. if(DEV_MODE == 'production'){
  3. var instance = axios.create({
  4. baseURL: 'https://yao.lenovo.com.cn/'
  5. // timeout: 20000,
  6. // withCredentials: false, // 跨域请求是否需要使用凭证
  7. });
  8. }else{
  9. var instance = axios.create({
  10. baseURL:'http://dev.like.lenovopcsd.com/'
  11. // timeout: 20000,
  12. // withCredentials: false, // 跨域请求是否需要使用凭证
  13. });
  14. }

package.json文件的配置项

  1. "scripts": {
  2. "test": "echo \"Error: no test specified\" && exit 1",
  3. "dev":"webpack --config webpack.config.js --env.dev=development",
  4. "build": "webpack --config webpack.pro.config.js --env.dev=production",
  5. "start": "webpack-dev-server --open",
  6. "server": "node server.js"
  7. },

环境变量

上面的一段代码可以看到—env.dev,这个东西就是配置webpack环境变量的这里在dev和pro环境我分别给赋值development 和 production,这样在webpack的配置文件中我们就可以通过env.dev访问到这个环境变量的值了。

说到这里他家可能问为啥用这个呢,definePlugin不都已经解决了域名和publicPath的问题了吗?

我用这个东西呢,主要是我在dev和pro环境下引入了不同的统计代码js。我需要在模板文件中通过一个变量来区分这两个环境来在script标签使用。

事情是这样的,我需要引入cnzz

  1. <script src="https://s96.cnzz.com/z_stat.php?id=*******"></script>

在dev和pro环境只有id是不一样的,我想把这个id通过HtmlWebpackPlugin的模板替换功能放到模板中,就像下面这个样子:

  1. <script src="https://s96.cnzz.com/z_stat.php?<%= htmlWebpackPlugin.options.cnz_params %>"></script>

然后我想的解决方案就是,通过环境变量传入值,然后在配置文件得到这个值再由HtmlWebpackPlugin的配置项将这个值传到前台,最后就实现了不同环境的控制。

  1. plugins.push(new HtmlWebpackPlugin({
  2. title: titles[k],
  3. template:html, //模板本身的位置
  4. filename:filename, //模板的文件名称,可以带目录,会自动生成目录
  5. chunks:[moduleName[0]], //用于指定允许插入模板的chunks,默认是所有,在多入口的时候需要配置这个,因为每个入口文件名字不同
  6. inject:'body', //文件插入模板的位置
  7. // hash: true, //给文件跟一个hash参数
  8. cnz_params: env && env.dev == 'production' ? 'id=1275452318&web_id=1275452318' : 'id=1275452587&web_id=1275452587'
  9. }));

当然还有其他方法,最简单粗暴的就是依靠最开始说到的defingPlugin定义的变量,将一些值直接挂在window对象上,然后再模板里面写一段js动态加载不同的js也是可以的。

不知道definePlugin定义的变量能否在模板中的script标签中直接使用这个我没有试过,欢迎印证了的朋友留言。