vue+webpack热替换

Posted 2020-09-05

项目地址: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目前还不能添加版本号。。。。