环境

传统式开发设计网页页面，每一次升级的过程中要大家手动式更新电脑浏览器才会升级。自打搭建专用工具问世。我们可以根据热更新的方法来实现升级。统称HMR（hot module replacement），也就是控制模块热更换，如果你每一次必须升级编码的情况下，没有在必须手动式更新就可以完成实际效果浏览。

外置专业知识

研究热更新是怎么完成以前，大家必须了解几种东西

• sockjs
• webpack.HotModuleReplacementPlugin
• memory-fs
• webpack-dev-middleware
• webpack一些常识和一些最底层专业知识，不然你可能会不明白，而且属于懵圈情况，针对一些东西都提供了连接
• Compiler事情流

memory-fs

内存系统文件，webpack默认设置形成的资料会扔到内存中，并不会立即写入电脑硬盘

webpack.HotModuleReplacementPlugin

汉语文本文档

英语文本文档

这个是HMR完成关键，由webpack内部结构所供应的一个软件，该插件会给予一些方式，用以查验变动，并对你说每一次变动所形成的文档hash

sockjs

用以推送socket要求，通告电脑浏览器开展变更

webpack-dev-middleware

webpack-dev-middleware会接受一个webpack所回到的一个compiler目标，随后启用compiler.watch监视文档变更，

我们知道webpack热更新的情况下，并不会写入电脑硬盘中，这是由于默认设置的情形下是写入内存的，由于内存的获取速率比电脑硬盘会快许多，我们可以根据devServer.writeToDisk来改动

if (options.writeToDisk) {
    // 写入电脑硬盘
} else {
    // 写入内存，并设定内存中的途径为现阶段途径
    const memoryFs = new MemoryFs()
}
复制代码

那样大家就可以了解文档是不是变更，而且把文档存有了内存中，现在在返回webpack-dev-server

HMR是怎么完成的

这儿用webpack-dev-server开展举例说明，全部热更新基本原理基本上相近。笔写大家完成一个简便的webpack环境变量。

const path = require(\'path\')
const webpack = require(\'webpack\')
const HtmlWebpackPlugin = require(\'html-webpack-plugin\')

module.exports = {
    entry: \'./src/index.js\',
    output: {
        path: path.resolve(._dirname, \'dist\'),
        filename: \'main.js\'
    },
    devServer: {
        host: \'localhost\',
        contentBase: path.resolve(__dirname, \'src\')
        port: 8080,
        hot: true,
        open: true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            template: \'./src/pages/index.html\',
            filename: \'index.html\'
        })
    ]
}
复制代码

简易完成

这是一个简易的流程表，不涉及到一切繁杂逻辑性，这图上大家必须了解好多个问题

1. 为什么必须运行
2. 为什么必须加上webpack.HotModuleReplacementPlugin
3. webpack-dev-server如何判断文档发生了转变
4. 怎样完成升级

如今大家拥有上边的问题，来逐一去看看下

1. 为什么必须webpack.HotModuleReplacementPlugin

这个是webpack官方网所供应的软件，该插件给予了一些方式，在我们运行的情况下webpack会给每一个文档引入moudle一个目标，这一目标里边有一个module.hot目标，实际可以参照 汉语文本文档 ，而且webpack每一次再次搭建的过程中会形成一个hash，在我们把devServer.writeToDisk设定为true的情况下，每一次变更还会继续形成这2个文档。

• hot-update.js是每一次必须发布的文档
• hot-update.json下一次升级必须形成的hash

[id].[fullhash].hot-update.js
[runtime].[fullhash].hot-update.json
复制代码

2. webpack-dev-server如何判断文档发生了转变

这个问题非常简单，webpack-dev-server运行的情况下，复位了express，而且把expres传送给了webpack-dev-middleware，webpack-dev-middleware也是webpack团队荣誉出品，devServer几乎全部api全是根据这一库去完成的。

webpack搭建的过程中会回到一个compiler目标，该对象会给予一个watch方式用于监视文档变更，而webpack-dev-middleware便是根据这些方式监视文档变更，
webpack.HotModuleReplacementPlugin也是一样的实际操作。而且每一次再次搭建的情况下webpack-dev-server都是会监视compiler的compile、invalid、done方式，会通告socket服务项目用以是不是展现overlay（遮罩层）。

• compile 在compilation形成以前，compilation是webpack每一次再次编译程序所回到的一个目标
• invalid 编译程序不成功
• done 编译程序取得成功

3. 怎样完成升级

webpack-dev-server在运行的过程中还会继续给entry加上2个文档

webpack-dev-server/clinet/index.js
webpack/hot/devServer.js // 假如设定了hotonly会引入webpack/hot/only-dev-server
复制代码

如今大家知道每一次搭建所形成的hash，和出现的文档，但此刻还没法热更新。我们可以纪录每一次搭建所形成的hash，用以分辨和目前的hash是不是配对，进而完成热更新，而且通告电脑浏览器开展升级。

webpack-dev-server/client/index.js承担每一次升级的情况，当状态为ok和warinings的过程中会实行一个reloadApp方式，该方法会emit一个webpackHotUpdate事情，并把变动的文档hash传送出来，随后webpack/hot/devServer.js承担监视这一事情，当监视到该情况的情况下，储存该文件hash，而且分辨hash是不是已升级而且module.hot.status为idle的情况下，实行一个check方式，check会取得一个必须发布的控制模块，如果有必须升级，则启用location.reload()方式，开展升级。

if (module.hot) {
	var lastHash;
	var upToDate = function upToDate() {
		return lastHash.indexOf(._webpack_hash__) >= 0;
	};
	var log = require(\"./log\");
	var check = function check() {
		module.hot
			.check(true)
			.then(function(updatedModules) {
				if (!updatedModules) {
					log(\"warning\", \"[HMR] Cannot find update. Need to do a full reload!\");
					log(
						\"warning\",
						\"[HMR] (Probably because of restarting the webpack-dev-server)\"
					);
					window.location.reload();
					return;
				}

				if (!upToDate()) {
					check();
				}

				require(\"./log-apply-result\")(updatedModules, updatedModules);

				if (upToDate()) {
					log(\"info\", \"[HMR] App is up to date.\");
				}
			})
			.catch(function(err) {
				var status = module.hot.status();
				if ([\"abort\", \"fail\"].indexOf(status) >= 0) {
					log(
						\"warning\",
						\"[HMR] Cannot apply update. Need to do a full reload!\"
					);
					log(\"warning\", \"[HMR] \"   log.formatError(err));
					window.location.reload();
				} else {
					log(\"warning\", \"[HMR] Update failed: \"   log.formatError(err));		}
			});
	};
	var hotEmitter = require(\"./emitter\");
	hotEmitter.on(\"webpackHotUpdate\", function(currentHash) {
		lastHash = currentHash;
		if (!upToDate() && module.hot.status() === \"idle\") {
			log(\"info\", \"[HMR] Checking for updates on the server...\");
			check();
		}
	});
	log(\"info\", \"[HMR] Waiting for update signal from WDS...\");
} else {
	throw new Error(\"[HMR] Hot Module Replacement is disabled.\");
}
复制代码

如今大家已经大约了解了热更新的全过程。