webpack-dev-server 源码剖析

2024年2月1日 185次阅读 来源: 海丽安娜

webpack-dev-server

简介

Use webpack with a development server that provides live reloading. This should be used for development only.

It uses webpack-dev-middleware under the hood, which provides fast in-memory access to the webpack assets.

将webpack与供应及时从新加载的开辟服务器一同运用。 这应当仅用于开辟。

它运用了引擎盖下的webpack-dev-middleware，它供应了对webpack资产的疾速内存接见。

运用

Getting Started

源码剖析解读

1. 结论：热更新的流程

  1. webpack在构建项目时会竖立服务端（server基于node）和客户端（client通常指浏览器），项目正式启动运转时两边会经由历程socket坚持衔接，用来满足前后端及时通信。
  2. 当我们保留代码时，会被webpack监听到文件变化，触发新一轮编译天生新的编译器compiler（就是我们所说的Tapable实例。它夹杂在一同Tapable来吸取功能来注册和挪用插件自身，能够明白为一个状况机。）。
  3. 在compiler的’done’钩子函数（生命周期）里挪用_sendStats发放向client发送ok或warning音讯，并同时发送向client发送hash值，在client保留下来。
  4. client接收到ok或warning音讯后挪用reloadApp宣布客户端搜检更新事宜（webpackHotUpdate）
  5. webpack/hot部份监听到webpackHotUpdate事宜，挪用check要领举行hash值对照以及搜检各modules是不是须要更新。如需更新会挪用hotDownloadManifest要领下载json（manifest）文件。
  6. hotDownloadManifest完成后挪用hotDownloadUpdateChunk要领，经由历程jsonp的体式格局加载最新的chunk，以后剖析对照文件举行文件的更新替代，完成全部热更新流程。

注：以下源码剖析采纳倒叙剖析体式格局

2. webpack/hot 源码解读

在webpack构建项目时，webpack-dev-server会在编译后js文件加上两个依靠文件：

/***/ 
(function(module, exports, __webpack_require__) {
  // 竖立socket衔接，坚持前后端及时通信
  __webpack_require__("./node_modules/webpack-dev-server/client/index.js?http://localhost:8080");
    // dev-server client热更新的要领
  __webpack_require__("./node_modules/webpack/hot/dev-server.js");
  module.exports = __webpack_require__("./src/index.js");
  /***/
})

  • webpack/hot/dev-server.js的文件内容：

    /*
  MIT License http://www.opensource.org/licenses/mit-license.php
  Author Tobias Koppers @sokra
*/
/*globals window __webpack_hash__ */
if (module.hot) {
  var lastHash;
  //__webpack_hash__是每次编译的hash值是全局的，就是放在window上
  var upToDate = function upToDate() {
    return lastHash.indexOf(__webpack_hash__) >= 0;
  };
  var log = require("./log");
  var check = function check() {
    module.hot
      .check(true)  // 这里的check要领终究进入到webpack\lib\HotModuleReplacement.runtime.js文件中
      .then(function(updatedModules) {
        //搜检一切要更新的module，假如没有module要更新那末返回null
        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;
        }
        //检测时刻另有module须要更新，假如有=>check()
        if (!upToDate()) {
          check();
        }
        //打印更新效果，一切须要更新的module和已被更新的module都是updatedModules
        require("./log-apply-result")(updatedModules, updatedModules);

        if (upToDate()) {
          log("info", "[HMR] App is up to date.");
        }
      })
      .catch(function(err) {
        //假如报错直接全局reload
        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] " + (err.stack || err.message));
          window.location.reload();
        } else {
          log("warning", "[HMR] Update failed: " + (err.stack || err.message));
        }
      });
  };
  //猎取MyEmitter对象
  var hotEmitter = require("./emitter");
  //监听‘webpackHotUpdate’事宜
  hotEmitter.on("webpackHotUpdate", function(currentHash) {
    lastHash = currentHash;
    //依据两点推断是不是须要搜检modules以及更新
    // 1 对照服务端传过来的最新hash值和客户端的__webpack_hash__是不是一致
    // 2 挪用module.hot.status要领猎取状况 是不是为 ‘idle’
    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.");
}

  • 加载最新chunk的源码剖析：

    • 要领挪用关联：module.hot.check=>HotModuleReplacement=>hotDownloadManifest=>hotEnsureUpdateChunk=>hotDownloadUpdateChunk

    • HotModuleReplacement模块内容:

      ...
function hotCheck(apply) {
  ...
  return hotDownloadManifest(hotRequestTimeout).then(function(update) {
    ...
    // 猎取到manifest后经由历程jsonp加载最新的chunk 
    /*foreachInstalledChunks*/
    // eslint-disable-next-line no-lone-blocks
    {
      /*globals chunkId */
      hotEnsureUpdateChunk(chunkId);
    }
    ...
  });
}
...

function hotEnsureUpdateChunk(chunkId) {
  if (!hotAvailableFilesMap[chunkId]) {
    hotWaitingFilesMap[chunkId] = true;
  } else {
    hotRequestedFilesMap[chunkId] = true;
    hotWaitingFiles++;
    hotDownloadUpdateChunk(chunkId);
  }
}

    • webpack会依据差别运转环境（node / webworker / web）挪用对应的要领（hotDownloadManifest & hotDownloadUpdateChunk）来加载chunk：，我们重要斟酌web环境下的要领

         // eslint-disable-next-line no-unused-vars
    function webpackHotUpdateCallback(chunkId, moreModules) {
      //...
    } 
    //$semicolon

    // eslint-disable-next-line no-unused-vars
    //jsonp要领加载chunk
    function hotDownloadUpdateChunk(chunkId) {
      var script = document.createElement("script");
      script.charset = "utf-8";
      script.src = $require$.p + $hotChunkFilename$;
      if ($crossOriginLoading$) script.crossOrigin = $crossOriginLoading$;
      document.head.appendChild(script);
    }

    // eslint-disable-next-line no-unused-vars
    function hotDownloadManifest(requestTimeout) {
      //...
    }

    • log-apply-result模块内容:

      
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/
module.exports = function(updatedModules, renewedModules) {
  //renewedModules示意哪些模块被更新了，盈余的模块示意，哪些模块因为 ignoreDeclined，ignoreUnaccepted设置没有更新
  var unacceptedModules = updatedModules.filter(function(moduleId) {
    return renewedModules && renewedModules.indexOf(moduleId) < 0;
  });
  var log = require("./log");
  //哪些模块没法HMR，打印log
  //哪些模块因为某种缘由没有更新胜利。个中没有更新的缘由多是以下的:
  //  ignoreUnaccepted
  //  ignoreDecline
  //  ignoreErrored
  if (unacceptedModules.length > 0) {
    log(
      "warning",
      "[HMR] The following modules couldn't be hot updated: (They would need a full reload!)"
    );
    unacceptedModules.forEach(function(moduleId) {
      log("warning", "[HMR]  - " + moduleId);
    });
  }
  //没有模块更新，示意模块是最新的
  if (!renewedModules || renewedModules.length === 0) {
    log("info", "[HMR] Nothing hot updated.");
  } else {
    log("info", "[HMR] Updated modules:");
    //更新的模块
    renewedModules.forEach(function(moduleId) {
      if (typeof moduleId === "string" && moduleId.indexOf("!") !== -1) {
        var parts = moduleId.split("!");
        log.groupCollapsed("info", "[HMR]  - " + parts.pop());
        log("info", "[HMR]  - " + moduleId);
        log.groupEnd("info");
      } else {
        log("info", "[HMR]  - " + moduleId);
      }
    });
    //每个moduleId都是数字那末发起运用NamedModulesPlugin
    var numberIds = renewedModules.every(function(moduleId) {
      return typeof moduleId === "number";
    });
    if (numberIds)
      log(
        "info",
        "[HMR] Consider using the NamedModulesPlugin for module names."
      );
  }
};

3. webpack-dev-server源码解读

webpack构建历程触发module更新的机遇

  • webpack-dev-server客户端源码的症结部份

    ...
...
const onSocketMsg = {
...
  ok() {
    sendMsg('Ok');
    if (useWarningOverlay || useErrorOverlay) overlay.clear();
    if (initial) return (initial = false); // eslint-disable-line no-return-assign
    reloadApp();
  },
  warnings(warnings) {
    log.warn('[WDS] Warnings while compiling.');
    const strippedWarnings = warnings.map((warning) => stripAnsi(warning));
    sendMsg('Warnings', strippedWarnings);
    for (let i = 0; i < strippedWarnings.length; i++) {
      log.warn(strippedWarnings[i]);
    }
    if (useWarningOverlay) overlay.showMessage(warnings);

    if (initial) return (initial = false); // eslint-disable-line no-return-assign
      reloadApp();
    },
  ...
  };

...

function reloadApp() {
  if (isUnloading || !hotReload) {
    return;
  }
  if (hot) {
    log.info('[WDS] App hot update...');
    // eslint-disable-next-line global-require
    const hotEmitter = require('webpack/hot/emitter');
    hotEmitter.emit('webpackHotUpdate', currentHash);
    //从新启动webpack/hot/emitter，同时设置当前hash
    if (typeof self !== 'undefined' && self.window) {
      // broadcast update to window
      self.postMessage(`webpackHotUpdate${currentHash}`, '*');
    } 
  } else {
    //假如不是Hotupdate那末我们直接reload我们的window就能够了
    let rootWindow = self;
    // use parent window for reload (in case we're in an iframe with no valid src)
    const intervalId = self.setInterval(() => {
      if (rootWindow.location.protocol !== 'about:') {
        // reload immediately if protocol is valid
        applyReload(rootWindow, intervalId);
      } else {
        rootWindow = rootWindow.parent;
        if (rootWindow.parent === rootWindow) {
          // if parent equals current window we've reached the root which would continue forever, so trigger a reload anyways
          applyReload(rootWindow, intervalId);
        }
      }
    });
}
function applyReload(rootWindow, intervalId) {
  clearInterval(intervalId);
  log.info('[WDS] App updated. Reloading...');
  rootWindow.location.reload();
}

    依据以上代码 能够看出：当客户端接收到服务器端发送的ok和warning信息的时刻，同时支撑HMR的情况下就会请求搜检更新，同时还收到服务器端本次编译的hash值。我们再看一下服务端是在什么机遇发送’ok’和’warning’音讯。

  • webpack-dev-server服务端源码的症结部份

    class Server {
  ...
  _sendStats(sockets, stats, force) {
    if (
      !force &&
      stats &&
      (!stats.errors || stats.errors.length === 0) &&
      stats.assets &&
      //每个asset都是没有emitted属性，示意没有发生变化。假如发生变化那末这个assets一定有emitted属性
      stats.assets.every((asset) => !asset.emitted)
    ) {
      
      return this.sockWrite(sockets, 'still-ok');
    }
    //设置hash
    this.sockWrite(sockets, 'hash', stats.hash);

    if (stats.errors.length > 0) {
      this.sockWrite(sockets, 'errors', stats.errors);
    } else if (stats.warnings.length > 0) {
      this.sockWrite(sockets, 'warnings', stats.warnings);
    } else {
      this.sockWrite(sockets, 'ok');
    }
  }
  ...
}

    上面的代码是发送‘ok’和‘warning’音讯的要领，那详细在什么机遇挪用此要领呢?

    class Server {
  constructor(compiler, options = {}, _log) {
    ...
    const addHooks = (compiler) => {
      const { compile, invalid, done } = compiler.hooks;

      compile.tap('webpack-dev-server', invalidPlugin);
      invalid.tap('webpack-dev-server', invalidPlugin);
      done.tap('webpack-dev-server', (stats) => {
        this._sendStats(this.sockets, stats.toJson(STATS));
        this._stats = stats;
      });
    };

    if (compiler.compilers) {
      compiler.compilers.forEach(addHooks);
    } else {
      addHooks(compiler);
    }
    ...
  }
...
}

    再看这部份代码，就能够明白了，每次在compiler的’done’钩子函数（生命周期）被挪用的时刻就会经由历程socket向客户端发送音讯，请求客户端去搜检模块更新完成HMR事情。

总结：近来正处于换事情阶段，有些空闲时候，恰好拔草，之前事情的历程就很想看一下webpack-dev-server 的完成道理，趁此机会大略进修了一下它的源码，有什么不对的处所还望指教，互相进修，加深明白。

    原文作者：海丽安娜
    原文地址: https://segmentfault.com/a/1190000018590369
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞