Webpack学习记录

基本概念Hot Module Replacement（以下简称 HMR）是 webpack 倒退至今引入的最令人兴奋的个性之一 ，当你对代码进行批改并保留后，webpack 将对代码从新打包，并将新的模块发送到浏览器端，浏览器通过新的模块替换老的模块，这样在不刷新浏览器的前提下就可能对利用进行更新。例如，在开发 Web 页面过程中，当你点击按钮，呈现一个弹窗的时候，发现弹窗题目没有对齐，这时候你批改 CSS 款式，而后保留，在浏览器没有刷新的前提下，题目款式产生了扭转。感觉就像在 Chrome 的开发者工具中间接批改元素款式一样。 WDS和浏览器的EventSource通信webpack-dev-server简称WDS,WDS启动后会与浏览器建设websocket链接。当服务器资源变换并从新编译后，会发送音讯到浏览器端，如果没有配置热替换，则浏览器会刷新。 配置热替换vue我的项目中，vue-loader会帮咱们配置热替换，咱们不必操心。如果不是vue我的项目，如何手动配置热替换呢1、webpack配置项批改 //...devServer:{ //... hot:true//启动热更新},//...plugins:[ //... new webpack.HotModuleReplacementPlugin()//退出热替换插件]2、打包文件内配置在你须要启动热替换的地位增加如下代码，比方你在入口文件index.js中增加热替换，那么每个模块变动都会触发热替换 //index.jsimport {logToScreen} from './util.js'logToScreen()if(module.hot){ module.hot.decline()//当index.js本身变换时不触发热替换而是间接刷新页面，依据状况增加这项配置 module.hot.accept()//也能够只监听util.js的更新而触发热替换，那么就这样配置：module.hot.accept(['./util.js'])}热替换原理 Webpack编译期，为须要热更新的 entry 注入热更新代码(EventSource通信)页面首次关上后，服务端与客户端通过 EventSource 建设通信渠道，把下一次的 hash 返回前端客户端获取到hash，这个hash将作为下一次申请服务端 hot-update.js 和 hot-update.json的hash批改页面代码后，Webpack 监听到文件批改后，开始编译，编译实现后，发送 build 音讯给客户端客户端获取到hash，胜利后客户端结构hot-update.js script链接，而后插入主文档hot-update.js 插入胜利后，执行hotAPI 的 createRecord 和 reload办法，获取到 Vue 组件的 render办法，从新 render 组件， 继而实现 UI 无刷新更新。