Open J-DuYa opened 9 months ago
Webpack 是一个构建前端界面的打包工具，视前端项目中的静态资源，如 css、js 和 img 等资源视为模块。通过执行不同的加载器（Loader）来解析这些模块，通过插件来扩展 webpack 的功能，最终将这些静态资源文件输出成 chunks。这些 chunk 可以在浏览器中进行解析和加载并渲染出完整的前端应用界面。
css
js
img
Loader
流程图绘制
webpack compiler 会将静态资源进行编译生成 bundle.js 文件传递给 bundle server 以及 HMR server。bundle server 拿到 bundle 之后通过 express 创建本地服务。HMR server 拿到 bundle 之后，会生成两个 manifest.json 文件里面存放的是 bundleId 以及 hash 值，HMR server 会将这个输出给 HMR Runtime 运行时，这个会在本地启动一个 sockect 服务。建立 bundle server 和 浏览器之间通信。当本地文件发生改变之后，依旧会将编译后的 bundle 发送给 bundle server 和 HMR server。HMR 会生成新的 hash 和 manifest.json，发送给 HMR server， 然后会推送给浏览器，浏览器会拿到 hash，通过请求获取变化后的 manifest.json 文件，manifest.json 包含变化的 hash 值和变化的文件 。浏览器会拿到变化的文件，重新 render，进行局部的加载。
1. Webpack 是什么
Webpack 是一个构建前端界面的打包工具，视前端项目中的静态资源，如
css、js和img等资源视为模块。通过执行不同的加载器（Loader）来解析这些模块，通过插件来扩展 webpack 的功能，最终将这些静态资源文件输出成 chunks。这些 chunk 可以在浏览器中进行解析和加载并渲染出完整的前端应用界面。2. Webpack 原理分析
3. 热更新原理
webpack compiler 会将静态资源进行编译生成 bundle.js 文件传递给 bundle server 以及 HMR server。bundle server 拿到 bundle 之后通过 express 创建本地服务。HMR server 拿到 bundle 之后，会生成两个 manifest.json 文件里面存放的是 bundleId 以及 hash 值，HMR server 会将这个输出给 HMR Runtime 运行时，这个会在本地启动一个 sockect 服务。建立 bundle server 和 浏览器之间通信。当本地文件发生改变之后，依旧会将编译后的 bundle 发送给 bundle server 和 HMR server。HMR 会生成新的 hash 和 manifest.json，发送给 HMR server， 然后会推送给浏览器，浏览器会拿到 hash，通过请求获取变化后的 manifest.json 文件，manifest.json 包含变化的 hash 值和变化的文件 。浏览器会拿到变化的文件，重新 render，进行局部的加载。
4. 总结