复习webpack4之热模块更新

之前学习过webpack3的知识，但是webpack4升级后还是有很多变动的，所以这次重新整理一下webpack4的知识点，方便以后复习。

这次学习webpack4不仅仅要会配置，记住核心API，最好还要理解一下webpack更深层次的知识，比如打包原理等等，所以可能会省略一些比较基础的内容，但是希望我可以通过此次学习掌握webpack，更好地应对以后的工作。

1.没有热模块更新时的情况

我们创建一个js，动态的创建一个按钮，点击一次，在页面上加一个div。（因为这时候没有用babel，所以写es5语法）

引入一个css，里面写关于div的样式。

这时，我们改变了css，比如把yellow改成blue，页面就会刷新，然后我们要重新添加div才能看到效果，那有没有办法可以让已经渲染的dom节点还存在呢？

2.HMR（hot module replacement）

我们在webpack.config.js的devServer中，开启hot:true,hotOnly:true。

hotOnly:true的意思是，即使HMR不生效，浏览器也不自动刷新。

然后我们引入一个插件，这个插件是webpack自带的插件，所以先引入webpack，然后在plugins中新增一个插件new webpack.HotModuleReplacementPlugin()。

这里注意如果利用webpack-dev-server cli 并且加了--hot 这个选项，就不要在这里加入new webpack.HotModuleReplacementPlugin()这个插件了，否则会报Maximum call stack size exceeded错误。

这时，我们改变css的背景颜色，页面不会刷新后再发生变化，而是不用重新渲染就展现效果。

不仅可以应用于css，js变化也是可以更新的。

我们创建两个js，在index中引入。

add.js可以累加div中的数值。

num.js是一个固定的值。

没有引入热模块更新时，改变num.js中的值，也会导致add.js归0，所以我们要引入热模块更新，但是按照上文配置完后，改变num.js发现页面并没有更新，是因为我们少写了一些代码。

所以在JS中，想让模块之间互不影响，就需要module.hot和module.hot.accept来进行HMR。

那为什么css就不需要写module.hot和module.hot.accept呢？实际上，css中也需要使用这两个方法，只不过css-loader帮我们写好了。vue中帮我们把js中的HMR也写好了，就不需要我们手动写了。

转载于:https://juejin.im/post/5cc1abf5e51d456e4d4de76c