webpack5 之 HMR 原理探究

+ 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()] 

"scripts": {  + "dev": "webpack serve",}

function render() {  root.innerHTML = require('./print.js')}render()
+ module.hot?.accept(['./print.js'], render)

 function printMe() {  - console.log('Updating print.js');  + console.log('Updating print.js 1'); }
 module.exports = printMe

"scripts": {  + "debug": "node ./node_modules/.bin/webpack serve"}

{  "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"    }  ]}

const runCli = cli => {  const pkg = require('webpack-cli/package.json');  require('webpack-cli/bin/cli.js');};

  runCLI(process.argv);

  const cli = new WebpackCLI();  await cli.run(args);

  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;  }

  const startDevServer_1 = __importDefault(require("./startDevServer"));  // line 81  const compiler = await cli.createCompiler();  await startDevServer_1.default(compiler);

  Server = require('webpack-dev-server/lib/Server');  const server = new Server(compiler, options);  server.listen(options.port, options.host, (error) => {      if (error) {          throw error;      }  });

  // 修改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');      }    });  }

  addEntries(webpackConfig, options);  compilers.forEach((compiler) => {    const config = compiler.options;    // 使entry修改生效    compiler.hooks.entryOption.call(config.context, config.entry);    // 使plugins修改生效    providePlugin.apply(compiler);  });

  // 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());

  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);

  // 触发webpackHotUpdate事件 line 23  var hotEmitter = require('webpack/hot/emitter');  hotEmitter.emit('webpackHotUpdate', currentHash);

  // 触发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;        }      });  };

  // 提供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;    }  }

  // 实例化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);    });  });

  // 开启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)

  // 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);  }

  // 拦截__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);      }    });  }

  // c为需要替换的chunkIds  {"c":["app"],"r":[],"m":[]}

  // 调用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")      })();    }  );