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

vue+webpack热替换的更多相关文章

  1. vue 无法热替换/热更新

    参考了小伙伴的解决办法: 1.https://blog.csdn.net/win7583362/article/details/65443291 虽然我并不是用对方的方法解决的. 依然还是建议大家打开 ...

  2. webpack 热替换

    一. 使用express.js搭建一个简易服务器demo地址,热替换的 先看包 // 清除重复的文件 "clean-webpack-plugin" // css加载器 " ...

  3. webpack热替换原理

    前期准备: const path = require('path'); const HtmlWebpackPlugin= require('html-webpack-plugin'); const C ...

  4. Vue CLI3 关闭热替换后出现的warning

    用vue cli3做项目的时候如果开启了typescript的严格模式,在dev server热替换的时候往往就会打出一大堆warning,严重的影响了编译效率.官方并没有提供关闭warning的ap ...

  5. 【webpack】-- 模块热替换

    全称是Hot Module ReplaceMent(HMR),理解成热模块替换或者模块热替换都可以吧,和.net中的热插拔一个意思,就是在运行中对程序的模块进行更新.这个功能主要是用于开发过程中,对生 ...

  6. Webpack 开发工具与模块热替换

    Webpack 开发工具与模块热替换 ​⚠️ 注意: 永远不要在生产环境中使用这些工具,永远不要. devtool 当 JavaScript 异常抛出时,你常会想知道这个错误发生在哪个文件的哪一行.然 ...

  7. 【webpack学习笔记】a05-模块热替换

    什么是模块热替换? 这个功能会在程序运行过程中替换.添加或删除模块,而无需重新加载整个页面 有什么用呢? 保留在完全重新加载页面时丢失的应用程序状态. 只更新变更内容,以节省宝贵的开发时间. 调整样式 ...

  8. 启用 webpack 的模块热替换特性

    启用 webpack 的模块热替换特性: module.exports = { //... devServer: { hot: true } } 注意,必须有 webpack.HotModuleRep ...

  9. webpack学习_模块热替换(Hot Module Peaplacement)

    模块热替换(Hot Module Replacement 或 HMR) 是webpack提供的最有用的功能之一.允许在u女性是更新各种模块,而无需进行完全刷新. 启用HMR 承接之前的代码 webpa ...

随机推荐

  1. 后缀字符串|计蒜客2019蓝桥杯省赛 B 组模拟赛(一)

    样例输入: 3 ba a aba 样例输出: 2 3 1 思路一:暴力,只能过50%数据,枚举每一个字符串,内层枚举其他字符串判断是否以这个字符串为后缀 思路二:哈希表,存储每一个后缀的数目,stri ...

  2. hihoCoder week16 RMQ-ST算法

    RMQ问题 用的st表吧,读入数据挺多的,输出数据也挺多的 我还用了 cout<<endl;  T了.. 真的是 做题不带脑子的 #include <bits/stdc++.h> ...

  3. Trimmomatic过滤Illumina低质量序列

    1. 下载安装 直接去官网下载二进制软件,解压后的trimmomatic-0.36.jar即为我们需要的软件 官网: http://www.usadellab.org/cms/index.php?pa ...

  4. (转)Introduction to Gradient Descent Algorithm (along with variants) in Machine Learning

    Introduction Optimization is always the ultimate goal whether you are dealing with a real life probl ...

  5. Ubuntu关机时间过长,总是停在logo界面

    有时候我们总能遇到ubuntu关机的时候卡住,无法关机,一查看发现是" a stop job is running..." 然后后面接着一串等待时间. 这时候我们需要修改一下sys ...

  6. HBase底层存储原理

    HBase底层存储原理——我靠,和cassandra本质上没有区别啊!都是kv 列存储,只是一个是p2p另一个是集中式而已! 首先HBase不同于一般的关系数据库, 它是一个适合于非结构化数据存储的数 ...

  7. Go 结构体(Struct)

    引用曾经看到的一篇文章里面对 Golang 中结构体的描述,如果说 Golang 的基础类型是原子,那么 结构体就是分子.我们都知道分子是由原子组成的,换言之就是结构体里面可以包含基础类型.切片. 字 ...

  8. _lottery

    通过积分购买彩票,奖励以积分形式发放 当aaa_chance,max_chance,min_chance均为0时,自动计算系统最小积分开销进行开奖

  9. DataGrip激活码

    引言: 网上有有很多datagirp的激活码,但是经过尝试很多都失效了,找了半天终于 找到了一个可用的激活码! 1. 激活码 适用版本: DataGrip2018.2.3,2018.1.1,其他版本没 ...

  10. pandas计数 value_counts()

    来自:曹骥 在pandas里面常用value_counts确认数据出现的频率. 1. Series 情况下: pandas 的 value_counts() 函数可以对Series里面的每个值进行计数 ...