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. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » webpack区分开发环境测试环境及mac下和windows下的区别
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » webpack区分开发环境测试环境及mac下和windows下的区别