webpack总结

模块热替换（HMR - hot module replacement）

模块热替换主要在应用程序运行过程中替换、添加、删除模块，不需要重新加载整个页面（只更新变更内容,调整样式快速）

HRM工作原理

在应用程序中

1. 应用程序代码要求 HMR runtime 检查更新。
2. HMR runtime（异步）下载更新，然后通知应用程序代码。
3. 应用程序代码要求 HMR runtime 应用更新。
4. HMR runtime（同步）应用更新。

在编译器中

1. 编译器需要发出update
2. 更新后的mainfest(JSON)（包括新的编译hash和所有待更新chunk目录）
3. 一个或多个更新后的chunk（javascript）。

编译器确保模块 ID 和 chunk ID 在这些构建之间保持一致

在模块中

HMR是可选功能，只会影响HMR代码模块

1. 编译器需要发出update
2. 更新后的mainfest(JSON)（包括新的编译hash和所有待更新chunk目录）
3. 一个或多个更新后的chunk（javascript）。

在HMR Runtime中

HMR是可选功能，只会影响HMR代码模块

1. 编译器需要发出update
2. 更新后的mainfest(JSON)（包括新的编译hash和所有待更新chunk目录）
3. 一个或多个更新后的chunk（javascript）。

概念

1. compile:webpack的核心。js编译、拆包。
2. hmr-server:建立连接并完成模块热更新的推送
3. bundle-server:静态服务器
4. bundle.js：clinet端
5. hmr-runtime:注入到bundle.js中的代码

更新流程

热更新开启后，当webpack打包时，会向client端注入一段HMR runtime代码，同时server端（webpack-dev-server或是webpack-hot-middware）启动了一个HMR服务器，它通过websocket和注入的runtime进行通信。

当webpack检测到文件修改后，会重新构建，并通过ws向client端发送更新消息，浏览器通过jsonp拉取更新过的模块，回调触发模块热更新逻辑。

1. 修改了一个或多个文件
2. 文件系统接收更改并通知Webpack。
3. Webpack重新编译构建一个或多个模块，并通知HMR服务器进行了更新。
4. HMR Server使用websockets通知HMR Runtime需要更新。HMR运行时通过HTTP请求这些更新（jsonp）
5. HMR运行时替换更新中的模块，如果确定这些模块无法更新，则触发整个页面刷新（

查看webpack版本

npm info webpack // 版本更新
复制代码

（查看全局安装的包 npm list -g --depth=0）