webpack基础篇（十一）：热更新以及其原理

说明

玩转webpack课程学习笔记。

热更新：webpack-dev-server（WDS）

安装命令：npm i webpack-dev-server -D

1、WDS 不刷新浏览器。

   webpack-dev-server 默认是会在内容编译完成后自动刷新(liveload)浏览器的，此处增加了 HotModuleReplacementPlugin 插件之后可以做到 HMR 的。如果 HMR 失败的化会降级使用 liveload 自动刷新浏览器模式。

2、WDS 不输出文件，而是放在内存中。(watch是放到本地磁盘)

3、使用 HotModuleReplacementPlugin（HMR） 插件。

   webpack 构建出来的 bundle.js 本身是不具备热更新的能力的， HotModuleReplacementPlugin 的作用就是将 HMR runtime 注入到 bundle.js，使得 bundle.js 可以和 HMR server 建立 websocket 的通信连接

4、增加命令webpack-dev-server --open，--open表示开启浏览器。

{
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --open"
  }
}

5、webpack配置

添加plugins，devServer，将mode改成development环境。

const path = require('path');
const webpack = require('webpack');
module.exports = {
  entry: {
    index: './src/index.js',
    search: './src/search.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  mode: 'development',
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    contentBase: './dist',
    hot: true
  }
};

6、执行命令npm run dev

执行完会自动打开浏览器，显示如下：（修改文件里的代码就会自动更新：不需要手动刷新一下浏览器）

WDS 与 HMR

单独写两个包也是出于功能的解耦来考虑的。

简单来说就是：hot-module-replacement-plugin 包给 webpack-dev-server 提供了热更新的能力。

1、webpack-dev-server(WDS)的功能提供 bundle server 的能力，就是生成的 bundle.js 文件可以通过 localhost://xxx 的方式去访问，另外 WDS 也提供 livereload(浏览器的自动刷新)。

2、hot-module-replacement-plugin 的作用是提供 HMR 的 runtime，并且将 runtime 注入到 bundle.js 代码里面去。一旦磁盘里面的文件修改，那么 HMR server 会将有修改的 js module 信息发送给 HMR runtime，然后 HMR runtime 去局部更新页面的代码。因此这种方式可以不用刷新浏览器。

热更新：使用 webpack-dev-middleware（WDM）

1、WDM 将 webpack 输出的文件传输给服务器

2、适用于灵活的定制场景

constexpress = require('express');
constwebpack = require('webpack');
constwebpackDevMiddleware= require('webpack-devmiddleware');
constapp = express();
constconfig = require('./webpack.config.js');
constcompiler = webpack(config);
app.use(webpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath
  }
));
app.listen(3000, function () {
  console.log('Example app listening on port 3000!\n');
});

热更新的原理分析

热更新最核心的是 HMR Server 和 HMR runtime。

热更新分两个阶段:

   启动阶段还是依赖磁盘文件去编译（如图：1 -> 2 -> A -> B）；

   更新阶段是直接内存增量更新的（如图：1 -> 2 -> 3 -> 4）。

1、Webpack Compile: 将 JS 编译成 Bundle

2、HMR Server: 将热更新的文件输出给 HMR Rumtime

   HMR Server 是服务端，用来将变化的 js 模块通过 websocket 的消息通知给浏览器端。

3、Bundle server: 提供文件在浏览器的访问

4、HMR Rumtime: 会被注入到浏览器，更新文件的变化

   HMR Runtime 是浏览器端，用于接受 HMR Server 传递的模块数据，浏览器端可以看到 .hot-update.json 的文件过来。

5、bundle.js: 构建输出的文件