美文网首页程序员
webpack区分开发环境测试环境及mac下和windows下的

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

作者: 臣以君纲 | 来源:发表于2018-12-09 16:16 被阅读0次
当我们使用当前流行的前端框架如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"
  },

相关文章

网友评论

    本文标题:webpack区分开发环境测试环境及mac下和windows下的

    本文链接:https://www.haomeiwen.com/subject/kgckhqtx.html