vue+webpack热替换
项目地址:http://pan.baidu.com/s/1i5KCXBf
今天上午和同事完成了在mac上面调试了我的框架,最后发现问题出在window系统和mac系统在表示路径的时候出现问题,在解决这个问题后,在同事的建议下,对项目的目录做了一个优化,把所有的资源文件放在assets目录,打包后去掉了一层pro目录这样看上去清爽了很多,下午开始了最坑爹的热替换。
热替换其实很早就开始研究了,但是一直没有头绪,今天是要必须解决了,具体解决方式:
1:我决定单独把热替换的配置代码写在一个文件里,然后在package里面配置一下就可以直接运行这个文件了:"test": "node dev-server",这样我npm test 实际上运行的是dev-server文件,我dev-server文件里面主要是写了热替换的代码
2:dev-server文件这里面用WebpackDevServer来定义访问地址和监听端口,然后我就npm start运行啊,想要看到理想中的效果啊,但是现实是残酷的,并美誉热替换
3:继续找啊,终于让我找到了,一片文章说可以在html手动引入<script type="text/javascript" src="http://localhost:8099/webpack.config.js"></script>来让wbepack使用websoket监听代码的变化,于是我就加上去啊,还是不行 有一个警告,上面说我的vue-loader只适合vue1.0,我咨询了我的同事,我同事说他也遇到这种问题,说vue-loader 9.0一下只支持vue1.0,9.0以上支持vue2.0,我高兴啊 立刻更新了vue-loader到最新的11.0.0,然而奇迹并没有发生。
4:又来一个错,说我的vue的版本和vue-temeplete-compiler版本不一致(欲哭无泪),继续寻找解决方案,又有一片文章说也遇到这种问题,他的解决方案是强制使vue和vue-temeplte-compiler的版本一致,于是我就强制指定啊 指定为2.0.9,终于解决了,不报错了
5:我欢天喜地的准备开始热替换,fuck!!!!编译又通不过了,压缩出现问题。。。。。,我咨询了我的同事,幸好她也遇到这种问题,他发给我一个文件.babelrc放在根目录,我放进去后继续打包,我擦 竟然通过了,666
6:终于可以热替换了,但是好像我的webpack.config.js是手动写在html里面的,那项目大了几十个页面难不成我要一个个写吗,这肯定不行啊,继续寻找解决方案,已经快吐血了,找到一篇文章,作者说可以通过写一个webpack插件,在插件里面监听HtmlWebpackPlugin事件,在他写入js文件的时候,我把我手动写的一条js引用路径加上去(原谅我说的不清楚,因为我也不是很懂。。。。。http://www.cnblogs.com/haogj/p/5649670.html)照着作者的思路写一遍(我写的第一个webpack插件-hotUpdate),可以啦,我都有点崇拜我自己了。。。。
7:到现在热替换终于可以了,但是我们一般测试的时候不需要压缩,生产环境不需要引入那个热替换的js,所以肯定要分生产环境和测试环境啊,我有一个思路,就是package里面的scripts里面可以预设一些脚本命令,于是我在里面写了一个test这个主要是执行我的测试环境,写了一个start里面主要是执行我的生产环境,然后测试环境和上产环境的配置文件分两个。。。。。。
8:到此差不多可以了,解决了心头大患,但是还是有瑕疵的 第一个就是运行测试环境前 前提是运行一次生产环境。。。。第二个就是我引入的base.css目前还不能添加版本号。。。。
转载于:https://www.cnblogs.com/mrzhu/p/6567801.html
vue+webpack热替换相关推荐
- webpack 热替换和热重载
热替换是利用h5 的新事件 eventSource 实现的,服务器向前端单向推送消息的事件,服务推送给前端,修改的文件 前端请求到该修改的文件插入到页面中,然后执行该js,页面局部渲染出来,原先的执行 ...
- webpack5 基础配置8 devServer 模块热替换HMR, 框架的HRM, HRM原理
dev Server 之前运行一直是手动打开页面,修改代码后,每次都要run build非常麻烦. 第一种是通过watch来解决,每次代码一修改就自动编译然后重新渲染. 可以看到刚我们修改了代码,重新 ...
- webpack实践之路(七):模块热替换HMR
HMR 模块热替换(Hot Module Replacement 或 HMR)允许在运行时更新各种模块,而无需进行完全刷新. HMR主要是通过以下几种方式,来显著加快开发速度: 保留在完全重新加载页面 ...
- 【webpack】-- 模块热替换
全称是Hot Module ReplaceMent(HMR),理解成热模块替换或者模块热替换都可以吧,和.net中的热插拔一个意思,就是在运行中对程序的模块进行更新.这个功能主要是用于开发过程中,对生 ...
- webpack 3 零基础入门教程 #12 - 如何使用模块热替换 HMR 来处理 CSS
模块热替换 是什么意思? 以前我们使用的 webpack --watch 或 webpack-dev-server 的功能是监听文件改变,就自动刷新浏览器,而这个 模块热替换 不用刷新浏览器,它是只让 ...
- webpack学习之2.自动编译、实时重载LiveReload、热替换HMR
代码沿用webpack学习之1.基础配置 每次要编译代码时,手动运行 npm run build 就会变得很麻烦. webpack 中有几个不同的方式,可以在代码发生变化后自动编译代码: webpac ...
- webpack学习(七):启用 HMR(模块热替换)
demo地址: https://github.com/Lkkkkkkg/webpack-demo 上次使用 webpack-dev-serve : https://blog.csdn.net/qq59 ...
- webpack工具链热替换 -- angularjs的粗放式实现
ng-hot-loader 前言 webpack-dev-server自带支持模块热替换特性(HMR),不刷新页面实现代码局部更新,使用HMR可以大幅提升开发效率. 实现目标 [x] 样式热替换 -- ...
- vue created 调用方法_深入解析 Vue 的热更新原理,偷学尤大的秘籍?
大家都用过 Vue-CLI 创建 vue 应用,在开发的时候我们修改了 vue 文件,保存了文件,浏览器上就自动更新出我们写的组件内容,非常的顺滑流畅,大大提高了开发效率.想知道这背后是怎么实现的吗, ...
最新文章
- linux 上oracle安装
- 大厂技术文档:Redis+Nginx+Spring全家桶+Dubbo精选
- rabbitmq的基本使用
- 关于iis部署的一些小问题
- Oracle入门(八)之权限
- python tensorflow教程_TensorFlow入门教程
- Linus 发文宣布Linux Kernel 5.0 正式发布
- python文件处理——JSON格式文件
- 关于optisystem中的变量解析
- 算法设计与分析之线性时间选择(C++)
- 2022高压电工考试题库及模拟考试
- Python实现统计二叉树叶子结点个数
- mp4视频在flash中边下载边播放
- Matplotlib画图的复杂颜色设置(包括fig, ax, spines, tick)
- 在平板电脑与移动3G大爆炸的时代,昔日霸主微软的反击
- stream、lamda、optional
- GStreamer基础教程10——GStreamer工具
- 算法训练 - 阿尔法乘积 计算一个整数的阿尔法乘积。对于一个整数x来说,它的阿尔法乘积是这样来计算的:如果x是一个个位数,那么它的阿尔法乘积就是它本身;否则的话,x的阿 尔法乘积就等于它的各位非0
- 对‘字典’按照value值进行排序
- 为drupal安装 Php + Apache 的参考文章
热门文章
- python socket通信 recv 丢包_关于socket网络传输数据的阿里云论坛用户知识和技术交流...
- 进阶学习(4.2) JVM 常用配置参数, GC 参数
- 网络推广专员如何稳定搜索引擎首页排名全力以赴致力于网络推广
- 企业网络推广——企业网络推广专员提高网站更新讲策略
- 网站内容收录除了原创性和质量其他因素也少不了
- 浅析营销型网站SEO优化的四大原则!
- scrapy框架_Scrapy框架学习---Scrapy介绍(一)
- proe输入数字时成双出现_罗斯蒙特温度变送器3144P单只和双只输入输出的的含义...
- 趣谈网络协议笔记-二(第十一讲)
- 稀有名词解释——Java 堆污染(犄角旮旯问题)