一、概念介绍
模块热替换(hot module replacement 或 HMR)是 webpack 提供的最有用的性能之一。它容许在运行时更新所有类型的模块，而无需齐全刷新。
次要是通过以下几种形式，来显著放慢开发速度：
- 保留在齐全从新加载页面期间失落的应用程序状态。
- 只更新变更内容，以节俭贵重的开发工夫。
- 在源代码中 CSS/JS 产生批改时，会立即在浏览器中进行更新，这简直相当于在浏览器devtools间接更改款式。
留神：HMR只能被利用到开发环境中。
本文示例代码运行环境：
node:12.20.1、webpack:5.37.1、webpack-cli:4.7.0、webpack-dev-server:3.11.2。
二、应用形式
更新webpack.config.js配置。
devServer: {
- port: 9000,
- host: '127.0.0.1',
- hot: true,
},
plugins: [
// 定义了devServer.hot:true后，能够省略不写，具体起因能够查看本文四、源码剖析 1.1 -> webpack-dev-server/lib/utils/addEntries.js 的代码
// new webpack.HotModuleReplacementPlugin()
]- package.json增加scripts。
webpack-cli提供了三个启动webpack-dev-server命令：webpack serve、webpack s、webpack server，它们的作用是雷同的。具体起因能够查看本文四、源码剖析 -> webpack-cli/lib/webpack-cli.js的代码。
"scripts": { + "dev": "webpack serve",}- 在index.js中新增module.hot?.accept办法。
function render() { root.innerHTML = require('./print.js')}render()+ module.hot?.accept(['./print.js'], render)- 批改print.js。
function printMe() { - console.log('Updating print.js'); + console.log('Updating print.js 1'); } module.exports = printMe三、源码调试
package.json中减少scripts。
"scripts": { + "debug": "node ./node_modules/.bin/webpack serve"}vscode中关上debug面板，新建一个launch.json配置，启动debug。
{ "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "debug", "runtimeExecutable": "npm", "runtimeArgs": [ "run-script", "debug" ], "skipFiles": [ "<node_internals>/**" ], // cwd设置为须要调试我的项目的根目录 "cwd": "${workspaceFolder}/webpack/hmr/test" } ]}四、源码剖析
以下内容次要是以执行webpack serve命令后，各个模块（文件）次要做了什么事件，来开展论述。
webpack serve
-> ./node_modules/./bin/webpack中runCli (line 48)
const runCli = cli => { const pkg = require('webpack-cli/package.json'); require('webpack-cli/bin/cli.js');};-> webpack-cli/bin/cli.js (line 25)
runCLI(process.argv);-> webpack-cli/lib/bootstrap.js (line 4)
const cli = new WebpackCLI(); await cli.run(args);-> webpack-cli/lib/webpack-cli.js (line 783)
const externalBuiltInCommandsInfo = [ { name: 'serve [entries...]', alias: ['server', 's'], pkg: '@webpack-cli/serve', }] const loadCommandByName = async (commandName) => { require(pkg); } this.webpack = require('webpack'); // line 1834 createCompiler(options, callback) { let compiler = this.webpack(options} return compiler; }-> @webpack-cli/serve/index.js (line 6)
const startDevServer_1 = __importDefault(require("./startDevServer")); // line 81 const compiler = await cli.createCompiler(); await startDevServer_1.default(compiler);-> @webpack-cli/serve/startDevServer.js (line 92)
Server = require('webpack-dev-server/lib/Server'); const server = new Server(compiler, options); server.listen(options.port, options.host, (error) => { if (error) { throw error; } });-> webpack-dev-server/lib/Server.js (line 92)
// 批改entry和plugins line 72 updateCompiler(this.compiler, this.options); // 监听compiler.hooks.done line 182 const { done } = compiler.hooks; done.tap('webpack-dev-server', (stats) => { this._sendStats(this.sockets, this.getStats(stats)); this._stats = stats; }); // 实例化express line 168 this.app = new express(); // 调用webpack-dev-middleware line 207 webpackDevMiddleware( this.compiler, Object.assign({}, this.options, { logLevel: this.log.options.level }) ); // 创立http server line 688 this.listeningApp = http.createServer(this.app); // 设置http listen line 774 listen(port, hostname, fn) { this.hostname = hostname; return this.listeningApp.listen(port, hostname, (err) => { // 创立socket server this.createSocketServer(); }); } // 实例化socket server line 696 createSocketServer() { const SocketServerImplementation = this.socketServerImplementation; this.socketServer = new SocketServerImplementation(this); this.socketServer.onConnection((connection, headers) => { if (!connection) { return; } this.sockets.push(connection); if (this.hot) { // 通知client端，热更新服务启动结束 this.sockWrite([connection], 'hot'); } }); }1 -> webpack-dev-server/lib/utils/updateCompliler.js (line 48)
addEntries(webpackConfig, options); compilers.forEach((compiler) => { const config = compiler.options; // 使entry批改失效 compiler.hooks.entryOption.call(config.context, config.entry); // 使plugins批改失效 providePlugin.apply(compiler); });1.1 -> webpack-dev-server/lib/utils/addEntries.js (line 142)
// config.entry减少webpack-dev-server/client/index.js line 39 const clientEntry = `${require.resolve( '../../client/' )}?${domain}${sockHost}${sockPath}${sockPort}`; // config.entry减少webpack/hot/dev-server.js line 49 hotEntry = require.resolve('webpack/hot/dev-server'); config.entry = prependEntry(config.entry || './src', additionalEntries); // devServer.hot: true会主动增加HotModuleReplacementPlugin插件 line 153 config.plugins.push(new webpack.HotModuleReplacementPlugin());1.1.1 -> webpack-dev-server/client/index.js (line 176)
代码会被打包进app.bundle.js中，在client端内实例化websocket,用来和server端的ws服务建设连贯，以便接管webpack每次编译的最新变动。
var onSocketMessage = { // client端接管server端发送hot指定，开启HMR模式 line 46 hot: function hot() { options.hot = true; log.info('[WDS] Hot Module Replacement enabled.'); }, // 接管webpack每次编译的最新hash line 63 hash: function hash(_hash) { status.currentHash = _hash; }, // 编译实现 line 107 ok: function ok() { // 第一次编译不必reloadApp if (options.initial) { return options.initial = false; } reloadApp(options, status); }, } // client端建设webSocket连贯, 有sockjs、websocket、path三种类型 line 176 socket(socketUrl, onSocketMessage);1.1.2 -> webpack-dev-server/client/utils/reloadApp.js (line 23)
// 触发webpackHotUpdate事件 line 23 var hotEmitter = require('webpack/hot/emitter'); hotEmitter.emit('webpackHotUpdate', currentHash);1.2.1 -> webpack/hot/dev-server.js (line 23)
代码会被打包进app.bundle.js中，设置webpackHotUpdate事件监听，在webpackHotUpdate事件被触发时执行热更新查看check。
// 触发webpackHotUpdate事件 line 23 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(); } }); // 触发module.hot.check() line 12 var check = function check() { module.hot .check(true) .then(function (updatedModules) { if (!updatedModules) { window.location.reload(); return; } }); };2 -> webpack-dev-server/lib/utils/getSocketServerImplementation.js (line 3)
// 提供sockjs、ws、path三种类型的socket服务 if (options.transportMode.server === 'sockjs') { ServerImplementation = require('../servers/SockJSServer'); } else if (options.transportMode.server === 'ws') { ServerImplementation = require('../servers/WebsocketServer'); } else { try { // eslint-disable-next-line import/no-dynamic-require ServerImplementation = require(options.transportMode.server); } catch (e) { serverImplFound = false; } }2.1 -> webpack-dev-server/lib/servers/WebsocketServer.js (line 12)
// 实例化ws服务 this.wsServer = new ws.Server({ noServer: true, path: this.server.sockPath, }); // http server被client拜访后，ws server触发connection事件 line 17 this.server.listeningApp.on('upgrade', (req, sock, head) => { this.wsServer.handleUpgrade(req, sock, head, (connection) => { this.wsServer.emit('connection', connection, req); }); });3 -> webpack-dev-middleware/index.js (line 67)
// 开启watching模式编译 line 41 context.watching = compiler.watch(options.watchOptions, (err) => { if (err) { context.log.error(err.stack || err); if (err.details) { context.log.error(err.details); } } }); // 设置文件系统 line 65 setFs(context, compiler); // 提供动态资源服务 line 67 middleware(context)3.1 -> webpack-dev-middleware/middleware.js (line 96)
// server content line 96 let content = context.fs.readFileSync(filename); res.setHeader('Content-Type', contentType); res.statusCode = res.statusCode || 200; if (res.send) { res.send(content); } else { res.end(content); }3.2 -> compiler.watch首次编译生成dist/app.bundle.js
// 拦挡__webpack_require__申请，重写require申请，在module上新增hot、parents、children属性 webpack/lib/hmr/HotModuleReplacement.runtime.js line 39 __webpack_require__.i.push(function (options) { var module = options.module; var require = createRequire(options.require, options.id); module.hot = createModuleHotObject(options.id, module); module.parents = currentParents; module.children = []; currentParents = []; options.require = require; }); // 收集模块间的依赖关系，寄存在模块的parents、children属性里 webpack/lib/hmr/HotModuleReplacement.runtime.js line 52 function createRequire(require, moduleId) { var me = installedModules[moduleId]; if (!me) return require; var fn = function (request) { if (me.hot.active) { if (installedModules[request]) { var parents = installedModules[request].parents; if (parents.indexOf(moduleId) === -1) { parents.push(moduleId); } } else { currentParents = [moduleId]; currentChildModule = request; } if (me.children.indexOf(request) === -1) { me.children.push(request); } } else { currentParents = []; } return require(request); }; return fn; } // 创立module.hot对象 webpack/lib/hmr/HotModuleReplacement.runtime.js line 103 function createModuleHotObject(moduleId, me) { var hot = { _acceptedDependencies: {}, // 收集module.hot.accept依赖 active: true, accept: function (dep, callback, errorHandler) { if (dep === undefined) hot._selfAccepted = true; else if (typeof dep === "function") hot._selfAccepted = dep; else if (typeof dep === "object" && dep !== null) { for (var i = 0; i < dep.length; i++) { hot._acceptedDependencies[dep[i]] = callback || function () { }; } } else { hot._acceptedDependencies[dep] = callback || function () { }; } }, check: hotCheck, apply: hotApply, }; return hot; } // 开启热更新查看 webpack/lib/hmr/HotModuleReplacement.runtime.js line 242 function hotCheck(applyOnUpdate) { // __webpack_require__.hmrM = hmrDownloadManifest, fetch申请app.[hash].hot-update.json文件 return __webpack_require__.hmrM().then(function (update) { var updatedModules = []; currentUpdateApplyHandlers = []; return Promise.all( Object.keys(__webpack_require__.hmrC).reduce(function ( promises, key ) { // __webpack_require__.hmrC = hmrDownloadUpdateHandlers, 创立script标签，用jsonp的形式去加载app.[hash].hot-update.js文件 __webpack_require__.hmrC[key]( update.c, update.r, update.m, promises, // 收集applyHandlers currentUpdateApplyHandlers, updatedModules ); return promises; }, []) ).then(function () { return waitForBlockingPromises(function () { if (applyOnUpdate) { // 触发applyHandlers return internalApply(applyOnUpdate); } }); }); }); } // fetch申请app.[hash].hot-update.json文件 __webpack_require__.hmrM = () => { if (typeof fetch === "undefined") throw new Error("No browser support: need fetch API"); return fetch(__webpack_require__.p + __webpack_require__.hmrF()).then((response) => { if (response.status === 404) return; if (!response.ok) throw new Error("Failed to fetch update manifest " + response.statusText); return response.json(); }); }; __webpack_require__.hmrC.jsonp = function ( chunkIds, removedChunks, removedModules, promises, applyHandlers, updatedModulesList ) { // 收集加载app.[hash].hot-update.js文件后的解决办法 applyHandlers.push(applyHandler); chunkIds.forEach(function (chunkId) { if ( __webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId] !== undefined ) { // 创立jsonp工作 promises.push(loadUpdateChunk(chunkId, updatedModulesList)); } }); }; // 触发module.hot._acceptedDependencies webpack/lib/hmr/JavascriptHotModuleReplacement.runtime.js line 24 function applyHandler(options) { var moduleOutdatedDependencies; return { apply: function (reportError) { for (var outdatedModuleId in outdatedDependencies) { if (__webpack_require__.o(outdatedDependencies, outdatedModuleId)) { var module = __webpack_require__.c[outdatedModuleId]; if (module) { moduleOutdatedDependencies = outdatedDependencies[outdatedModuleId]; for (var j = 0; j < moduleOutdatedDependencies.length; j++) { var dependency = moduleOutdatedDependencies[j]; var acceptCallback = // 清空module.hot._acceptedDependencies中的办法 module.hot._acceptedDependencies[dependency]; } } } } return outdatedModules; } }; } // 拼接jsonp申请app.[hash].hot-update.js门路 function loadUpdateChunk(chunkId) { return new Promise((resolve, reject) => { var url = __webpack_require__.p + __webpack_require__.hu(chunkId); __webpack_require__.l(url, loadingEnded); }); } // 创立script标签来加载js文件 __webpack_require__.l = (url, done, key, chunkId) => { var script, needAttach; if (!script) { needAttach = true; script = document.createElement('script'); script.charset = 'utf-8'; script.timeout = 120; script.src = url; } needAttach && document.head.appendChild(script); }; // 定义self["webpackHotUpdate"]办法，用currentUpdate来收集须要热更新模块的模块 webpack/lib/web/JsonpChunkLoadingRuntimeModule.js line 303 self["webpackHotUpdate"] = (chunkId, moreModules, runtime) => { for (var moduleId in moreModules) { if (__webpack_require__.o(moreModules, moduleId)) { currentUpdate[moduleId] = moreModules[moduleId]; if (currentUpdatedModulesList) currentUpdatedModulesList.push(moduleId); } } }; // 应用须要热更新的模块 webpack/lib/hmr/HotModuleReplacement.runtime.js line 298 function internalApply(options) { var results = currentUpdateApplyHandlers.map(function (handler) { return handler(options); }); results.forEach(function (result) { if (result.apply) { // 调用applyHandler.apply() var modules = result.apply(reportError); } }); }3.3 -> compiler.watch从新编译,由webpack.HotModuleReplacementPlugin生成dist/app.[hash].hot-update.json
// c为须要替换的chunkIds {"c":["app"],"r":[],"m":[]}3.4 -> compiler.watch从新编译,由webpack.HotModuleReplacementPlugin生成dist/app.[hash].hot-update.js
// 调用self["webpackHotUpdate"](chunkId, moreUpdates) self["webpackHotUpdate"]("app", { "./src/print.js": ((module) => { function printMe() { console.log('Updating print.js.3'); } module.exports = printMe }) }, function (__webpack_require__) { "use strict"; (() => { // 为每次编译最新的hash __webpack_require__.h = () => ("4bbb5237e2809cf139b2") })(); } );五、工作原理
HMR工作流程剖析
webpack监听到我的项目中文件或者模块的代码有批改后，由webpack.HotModuleReplacementPlugin插件生成hot-update.json和hot-update.js补丁文件，而后客户端通过socket连贯失去补丁文件，最初由
HMR runtime将补丁文件的内容利用到模块零碎中。
HMR工作原理图
上图展现了从咱们批改代码，到模块热更新实现的一个 HMR 残缺工作流程，图中已用箭头将流程标识进去。
- webpack-dev-server提供http server服务和socket server服务，在webpack-dev-middleware中间件中启用webpack的watch模式。
- 当文件系统中某一个文件产生批改，webpack 监听到文件变动，依据配置文件对模块从新编译打包，并将打包后的代码保留在文件系统中。
- webpack-dev-server/client/index.js在浏览器端和服务端之间建设一个 websocket长连贯，将webpack编译打包的状态信息告知浏览器端。
- 浏览器端通过webpack/hot/dev-server.js接管到最新的编译信息，从而触发module.hot.check办法来开始热更新查看。
- 执行webpack/lib/hmr/HotModuleReplacement.runtime.js中的hotCheck办法，通过hmrDownloadManifest以fetch形式申请hot-update.json文件，而后执行loadScript以jsonp的形式加载hot-update.js文件。
- 执行hot-update.js文件中的self['webpackHotUpdate']办法，在webpack/lib/web/JsonpChunkLoadingRuntimeModule.js文件的self['webpackHotUpdate']办法定义中去收集到须要更新的模块依赖。
- 调用internalApply办法，用新模块替换掉旧模块，而后执行module.hot.__acceptedDependencies中的回调函数，从而实现模块替换的成果。
六、源码实现
代码地址
页面拜访地址：http://127.0.0.1:9001/hmr.html
已实现相应性能的模块列表：
- @webpack-cli/serve/lib/index.js 启动服务
- webpack-dev-server/lib/Server.js 设置http和socket服务监听
- webpack-dev-server/client/index.js 提供websocket连贯
- webpack/hot/dev-server.js 触发module.hot.check
- webpack-dev-middleware/index.js 启用compiler.watch()和提供动态资源服务
- static/hmr.js 收集模块依赖、下载hot-update.json、hot-update、js文件，执行模块热替换
七、总结
本文和大家次要分享Webpack的HMR源码剖析和工作原理，在工作原理剖析中，通过一张“webpack hmr工作原理图”图让大家对HMR整个工作流程有所理解，HMR自身源码内容较多，许多细节之处本文没有残缺写出，须要各位读者本人缓缓浏览和了解源码。
参考文章
1.官网文档