Webpack 本质上是一个现代 Javascript 应用程序的静态模块打包工具。

Webpack 与 Gulp 各自有什么特点

• Gulp 是基于任务（task）和 流（stream）的打包工具。它需要开发者对于打包任务和结构有比较清晰的认知, 在单个task里执行调用工具多次操作流水线上一步处理的结果，直至任务结束，返回处理的结果。
• Webpack：
  1. 初始化参数：webpack 将命令行里的参数和配置文件里的参数进行合并，获得最终的参数；
  2. 开始编译：webpack 根据上一步获得的参数，初始化 Compiler 对象，然后调用 Compiler 的 run 方法开始编译；
  3. 确定入口：根据配置里的 entry 找出所有的入口文件；
  4. 编译模块：从入口文件开始，调用所有loader将文件翻译成 compliation, 然后递归的编译所有依赖的模块，最终得到所有模块的翻译后的内容和它们的依赖关系；
  5. 输出资源：根据所有模块的依赖关系，生成一个个包含多个模块的 chunk, 然后将 chunk 转换成单个文件，加入输出列表。此外，这是可以修改输出内容的最后机会；
  6. 输出完成：确定好输出内容后，根据配置好的输出目录和文件名，将内容写入文件系统。

Webpack 的热更新（hot module replacement）原理

Webpack 的 HMR 可以在程序运行时，完成模块的增加、删除、更新，而不用刷新浏览器。

启动 HMR

在 webpack.config.js 里修改配置, devServer.hot 设为 true：

// webpack.config.js
devServer: {
    contentBase: './dist',
    hot: true,
}

webpack-dev-server 启动时加上 --watch 参数。

HMR 原理

• Webpack 在 watch 模式下，如果监听到文件和模块有改动，根据配置文件，对模块进行重新编译打包，并将打包好的内容通过JavaScript 对象保存在内存中；
• Webpack-dev-server(以下简称WDS) 通过和 Webpack 之间的接口, 调用 webpack 暴露的API对代码进行监控，并告诉 webpack, 将代码打包到内存中；
• WDS 对文件/模块进行监听，如果开启了 devServer.watchContentBase的话，静态文件被修改后，浏览器就会启动重载。
• Webpack 在浏览器和服务端维护了一个 websocket 长连接，把 webpack 编译打包各阶段信息和静态文件的修改信息发送给浏览器端，浏览器根据不同的信息采用不同的方法来更新（热更新或者重载）；这一步主要还是接收编译结果的hash值，用来和之前的模块的hash做比较，后续用来进行热替换；
• Webpack-dev-server/client 并不直接获取最新的代码，而是把这部分任务交给 webpack/hot/dev-server，webpack/hot/dev-server 根据传过来的信息和配置文件，决定是重载浏览器还是热更新；
• HotModuleReplacement.runtime（以下简称HMR runtime）接收到 webpack/hot/dev-server 发送的编译打包的hash值，通过 JsonpMainTemplate Runtime 向 server 端发送 Ajax 请求，获得一个包含要更新模块 hash 的 json 文件，获取到更新列表后，再通过 Jsonp 请求获取到最新模块代码；
• HMR runtime 对新旧模块做对比，决定是否要热更新。在决定热更新之后，检查模块的依赖关系，更新模块以及模块间的依赖引用；
• 如果热更新失败，回退到 live reload, 就是调用浏览器重载来替代热更新；

总的来说，热更新就是浏览器端和服务端维护了一个 websocket, 服务端监测到文件的修改和更新之后，向浏览器端推送包含模块构建的 hash 的更新消息，浏览器端接收到消息后和上一次的hash做对比，如果有差异，就通过HMR runtime 发送 ajax 请求获得新构建的文件列表和 hash，浏览器接着根据这些内容再向服务端发起 jsonp 请求获得 chunk 的增量更新，最终由 HotModuleReplacelugin 来对更新的模块和引用依赖进行更新；