webpack HMR babel的陷阱

快速笔记
基础知识不提

webpack官方文档支持中文了
HMR的配置方式有两种:webpack-dev-server和api方式。讨论的是前一种

代码使用的是webpack文档中的那个,自己查阅

当我按照说明测试代码的时候,出了问题,module.hot.accept的callback并第一次执行了,后面就不会执行,但是chrome控制台的输出中WDS的确检测到了print.js这个文件的更新,但是更新并未合并上去,也没有报什么错误。
我唯一跟官文不一样的是module.rules中test js类型文件的时候,用了babel-loader了。删掉这个匹配就没错了,跟官文一样的结果,加上这个就出错。

原因:
webpack2+就有了ES6的处理能力,babel也有,所以冲突了。给babel-loader的presets的env或者es2015都设置modules:false,让webpack来处理js的模块化(转换)问题。
解决,折腾了好几个小时。

你可能感兴趣的:(webpack HMR babel的陷阱)