webpack区分开发环境测试环境及mac下和windows下的区别

当我们使用当前流行的前端框架如ng react vue 进行开发时,不可避免的会配置许多地址,而且这些地址再开发环境下和测试环境下是不一样的,
如果我们每次打包都需要修改一遍配置文件的话,第一,效率低容易遗忘,第二,身为程序员对做这种事情感觉非常的反感,能自动化的过程完全不想手动...

于是进行环境的区分是非常有必要的,

开发环境和生产环境一般只有一个,然而测试环境却有好多,
这时我们可以通过webpack 对环境进行区分,通过package.json中的脚本配置将不同的环境配置到webpack中,webpack将环境注入到代码中,于是便能打包不同环境时运行不同的脚本,从而完成环境的区分功能

直接上代码
package.json 配置

     "scripts": {
        "dev": "set type=dev&webpack-dev-server --content-base ./ --host localhost --open --inline --hot --compress --colors --config build/webpack.dev.config.js",
        "build": "set type=build&webpack --progress --hide-modules --config build/webpack.prod.config.js",
        "7002": "set type=7002&webpack --progress --hide-modules --config build/webpack.prod.config.js",
        "7004": "set type=7004&webpack --progress --hide-modules --config build/webpack.prod.config.js",
        "7006": "set type=7006&webpack --progress --hide-modules --config build/webpack.prod.config.js",
        "7008": "set type=7008&webpack --progress --hide-modules --config build/webpack.prod.config.js"
  },

package.json脚本向webpack注入 type 环境变量,webpack中通过DefinePlugin插件 将变量注入到前端代码中,

    new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"'+process.env.type+'"'
            }
        }),

这个插件再使用时,注入的字符串值必须是双引号包裹,所以通过字符串拼接一下

然后就可以在代码中,通过

env:process.env.NODE_ENV=="dev"?"dev":'prod',

来获取不同环境下所配置的不同变量了,,然后根据process.env.NODE_ENV(这个值的名称可以随便取)的值来选择接口调用的不同地址,环境区分完成,

例如开头package.json中的配置,如果需要打包7002下的包只需要npm run 7002 需要打包7004环境下的包只需要npm run 7004,

然而当我在mac电脑下 checkout这个项目后却发现,环境区分失败了,,因为windows下使用set注入环境变量,而类unix系统下使用export注入环境变量,于是将 package.json中的set 改为export 然而还是不好使。。

最后经过多次尝试,找到了mac下注入变量的方法,代码如下

    "scripts": {
        "dev": "type=dev webpack-dev-server --content-base ./ --host localhost --open --inline --hot --compress --colors --config build/webpack.dev.config.js",
        "build": "type=build webpack --progress --hide-modules --config build/webpack.prod.config.js",
        "7002": "type=7002 webpack --progress --hide-modules --config build/webpack.prod.config.js",
        "7004": "type=7004 webpack --progress --hide-modules --config build/webpack.prod.config.js",
        "7006": "type=7006 webpack --progress --hide-modules --config build/webpack.prod.config.js",
        "7008": "type=7008 webpack --progress --hide-modules --config build/webpack.prod.config.js"
  },
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1 Webpack 1.1 概念简介 1.1.1 WebPack是什么 1、一个打包工具 2、一个模块加载工具 3...
    Kevin_Junbaozi阅读 11,766评论 0 16
  • 一、webpack的基本概念 webpack 本质上是一个打包工具,它会根据代码的内容解析模块依赖,帮助我们把多个...
    cilla123阅读 5,443评论 0 8
  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 10,680评论 4 31
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 12,542评论 7 35
  • “这个世界上,真的有人吗?妈妈。”年少的我,问着这个天真的问题。 当时妈妈说:“傻孩子,别怕,这世界上没有人。” ...
    三久零阅读 2,720评论 0 0