create-react-app 原理及源码分析 about blog HOT 2 OPEN

{
  // 使用 IntelliSense 了解相关属性。
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "init",
      "program": "${workspaceFolder}/packages/create-react-app/index.js",
      "args": ["test-app"]
    },
    {
      "type": "node",
      "request": "launch",
      "name": "start",
      "program":
        "${workspaceFolder}/test-app/node_modules/react-scripts/bin/react-scripts.js",
      "args": ["start"]
    }
  ]
}

'use strict';

class WatchMissingNodeModulesPlugin {
  constructor(nodeModulesPath) {
    this.nodeModulesPath = nodeModulesPath;
  }

  apply(compiler) {
    compiler.plugin('emit', (compilation, callback) => {
      var missingDeps = compilation.missingDependencies;
      var nodeModulesPath = this.nodeModulesPath;

      // If any missing files are expected to appear in node_modules...
      if (missingDeps.some(file => file.indexOf(nodeModulesPath) !== -1)) {
        // ...tell webpack to watch node_modules recursively until they appear.
        compilation.contextDependencies.push(nodeModulesPath);
      }

      callback();
    });
  }
}

module.exports = WatchMissingNodeModulesPlugin;

var connection = new SockJS(
  url.format({
    protocol: window.location.protocol,
    hostname: window.location.hostname,
    port: window.location.port,
    // Hardcoded in WebpackDevServer
    pathname: "/sockjs-node"
  })
);

// 接收 server 发过来的信号
connection.onmessage = function(e) {
  var message = JSON.parse(e.data);
  switch (message.type) {
    case "hash": // 更新 hash
      handleAvailableHash(message.data);
      break;
    case "still-ok": // 所有更新的代码是否已经被编译到本地
    case "ok":
      handleSuccess();
      break;
    case "content-changed": // contentBase 更新时直接 reload 浏览器，与 HMR 无关
      // Triggered when a file from `contentBase` changed.
      window.location.reload();
      break;
    case "warnings": // 编译遇到 warning
      handleWarnings(message.data);
      break;
    case "errors": // 编译遇到 error
      handleErrors(message.data);
      break;
    default:
    // Do nothing.
  }
};

Server.prototype._sendStats = function (sockets, stats, force) {
  if (
    !force &&
    stats &&
    (!stats.errors || stats.errors.length === 0) &&
    stats.assets &&
    stats.assets.every(asset => !asset.emitted)
  ) {
    return this.sockWrite(sockets, 'still-ok');
  }

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

// Attempt to update code on the fly, fall back to a hard reload.
function tryApplyUpdates(onHotUpdateSuccess) {
  if (!module.hot) {
    // HotModuleReplacementPlugin is not in Webpack configuration.
    window.location.reload(); // 没开启热更新，直接刷新
    return;
  }

  // 只更新当前最新版本的 compilation || webpack 热更新模块状态为 idle
  if (!isUpdateAvailable() || !canApplyUpdates()) {
    return;
  }

  // check 的回调入口
  function handleApplyUpdates(err, updatedModules) {
    // 如果编译报错则直接刷新页面
    if (err || !updatedModules || hadRuntimeError) {
      window.location.reload();
      return;
    }

    // 主要目的就是引入 onHotUpdateSuccess
    if (typeof onHotUpdateSuccess === "function") {
      // Maybe we want to do something.
      onHotUpdateSuccess();
    }

    // 在更新期间又来了更新，则再执行一次
    if (isUpdateAvailable()) {
      // While we were updating, there was a new update! Do it again.
      tryApplyUpdates();
    }
  }

  // https://webpack.github.io/docs/hot-module-replacement.html#check
  // A check makes an HTTP request to the update manifest. If this request fails, there is no update available.
  // If it succeeds, the list of updated chunks is compared to the list of currently loaded chunks.For each loaded chunk,
  // the corresponding update chunk is downloaded.All module updates are stored in the runtime.
  // When all update chunks have been downloaded and are ready to be applied, the runtime switches into the ready state.
  // 热更新完成时触发回调
  var result = module.hot.check(/* autoApply */ true, handleApplyUpdates);

  // // Webpack 2 returns a Promise instead of invoking a callback
  if (result && result.then) {
    result.then(
      function(updatedModules) {
        handleApplyUpdates(null, updatedModules);
      },
      function(err) {
        handleApplyUpdates(err, null);
      }
    );
  }
}

  if (isHotUpdate) {
    tryApplyUpdates(function onHotUpdateSuccess() {
      // 只要不是第一次编译就尝试热更新
      // Only dismiss it when we're sure it's a hot update.
      // Otherwise it would flicker right before the reload.
      ErrorOverlay.dismissBuildError();
    });
  }

  if (isHotUpdate) {
    tryApplyUpdates(function onSuccessfulHotUpdate() {
      // Only print warnings if we aren't refreshing the page.
      // Otherwise they'll disappear right away anyway.
      printWarnings();
      // Only dismiss it when we're sure it's a hot update.
      // Otherwise it would flicker right before the reload.
      ErrorOverlay.dismissBuildError();
    });
  } else {
    // Print initial warnings immediately.
    printWarnings();
  }