https://juejin.im/post/5e3a28e6e51d4526f76ea753javascript

基於webpack的熱重載live reload和熱更新HMR — 當文件被修改後如何讓瀏覽器更新代碼

在前端應用框架中不論是react仍是vue，官方都提供了相應的腳手架方便開發者快速入手，當咱們在開發時修改某個js或者css文件時，webpack會自動編譯咱們的文件，咱們刷新瀏覽器就能夠看到編譯後的文件。爲此咱們會想，若是咱們修改保存以後，文件被編譯、瀏覽器自動刷新、或者瀏覽器局部刷新(不刷新整個瀏覽器)，這樣的話多好。固然，基於webpack打包工具的相關庫已經實現了。下面對此部分流程作簡單的分析 css

熱重載live reload： 就是當修改文件以後，webpack自動編譯，而後瀏覽器自動刷新->等價於頁面window.location.reload()
熱更新HMR： 熱重載live reload並不可以保存應用的狀態（states），當刷新頁面後，應用以前狀態丟失。舉個列子：頁面中點擊按鈕出現彈窗，當瀏覽器刷新後，彈窗也隨即消失，要恢復到以前狀態，還需再次點擊按鈕。而webapck熱更新HMR則不會刷新瀏覽器，而是運行時對模塊進行熱替換，保證了應用狀態不會丟失，提高了開發效率

相關版本選擇：
html

webpack 版本git checkout v2.7.0 版本
webpack-dev-middleware 版本git checkout v1.12.2 版本
webpack-dev-server 版本git checkout v2.9.7 版本

說明： 這裏選擇webpack的版本爲V2，是由於以前debug webpack的打包流程時恰爲v2的版本，那可能會問webpack-dev-server版本爲何是這個呢？這裏解釋下，經過package.json中的字段peerDependencies能夠選定版本，爲此我選擇了對應的最新版本 v2.9.7。一樣webpack-dev-middleware版本選擇也是同樣的，主要看依賴關係。附上webpack-dev-server庫的package.json文件描述前端

"name": "webpack-dev-server",
"version": "2.9.7",
"peerDependencies": {
    "webpack": "^2.2.0 || ^3.0.0"  // 這裏說明須要的版本號
 }
複製代碼

進入主題 demo是 webpack-dev-server 目錄下面的examples/api/simple列子，只粘貼出關鍵代碼，建議clone代碼比對一下vue

server.js 入口文件java

'use strict';

const Webpack = require('webpack');
const WebpackDevServer = require('../../../lib/Server');
const webpackConfig = require('./webpack.config');

const compiler = Webpack(webpackConfig);
const devServerOptions = Object.assign({}, webpackConfig.devServer, {
  stats: {
    colors: true
  }
});
const server = new WebpackDevServer(compiler, devServerOptions);

server.listen(8080, '127.0.0.1', () => {
  console.log('Starting server on http://localhost:8080');
});
複製代碼

const webpackConfig = require('./webpack.config'); 文件以下node

'use strict';
var path = require("path");
// our setup function adds behind-the-scenes bits to the config that all of our
// examples need
const { setup } = require('../../util');

module.exports = setup({
  context: __dirname,
  entry: [
   './app.js', 
   '../../../client/index.js?http://localhost:8080/', 
   'webpack/hot/dev-server'
  ],
  devServer: {  // 這裏配置hot值決定當開發時文件被修改並保存後 更新模式爲熱更新HMR
    hot: true
  }
});
複製代碼

入口entry 包含'../../../client/index.js?http://localhost:8080/' 以及 'webpack/hot/dev-server' 做用分別是：前者是WebpackDevServer的客戶端瀏覽器代碼，經過sockjs-client來連接Server端進行通訊，好比開發時代碼修改後保存，WebpackDevServer會經過 webpack-dev-middleware 拿到webpack編譯後的結果，經過websockets 發送消息類型給客戶端瀏覽器。後者是webpack熱更新HMR的客戶端瀏覽器代碼，打包時會insert進去，做用是當瀏覽器收到websockets發過來消息後，若是webpackConfig配置了webpack.HotModuleReplacementPlugin插件，就會走熱更新HMR模式 react

../../../client/index.js 文件以下webpack

'use strict';

const socket = require('./socket');

let urlParts;
let hotReload = true;

// __resourceQuery 也就是../../../client/index.js後面的參數 http://localhost:8080/ 經過webpack 打包時候替換
if (typeof __resourceQuery === 'string' && __resourceQuery) {
  // If this bundle is inlined, use the resource query to get the correct url.
  urlParts = url.parse(__resourceQuery.substr(1));
} else {
  // ...
}

let hot = false;
let currentHash = '';

const onSocketMsg = {
  hot: function msgHot() {
    hot = true;
  },
  hash: function msgHash(hash) {
    currentHash = hash;
  },
  ok: function msgOk() {
    reloadApp();
  }
};

// 創建websockets 連接
socket(socketUrl, onSocketMsg);

function reloadApp() {
  if (isUnloading || !hotReload) {
    return;
  }
  // 若是webpackConfig 中配置devServer.hot 爲true，就走熱更新HMR的模式，結論能夠經過webpack-dev-server 的lib/Server.js 文件邏輯得出
  if (hot) {
    const hotEmitter = require('webpack/hot/emitter');
    hotEmitter.emit('webpackHotUpdate', currentHash);
  } else { // 不然走熱重載live reload 直接刷新瀏覽器
    applyReload(rootWindow, intervalId);
  }
  function applyReload(rootWindow, intervalId) {
    clearInterval(intervalId);
    log.info('[WDS] App updated. Reloading...');
    rootWindow.location.reload();
  }
}
複製代碼

const socket = require('./socket'); 文件以下git

'use strict';

const SockJS = require('sockjs-client');
let sock = null;

function socket(url, handlers) {
  sock = new SockJS(url);
  
  sock.onclose = function onclose() {
    // 此處是重連的邏輯 省略...
  };

  sock.onmessage = function onmessage(e) { // 當收到Server端的websockets 消息後執行對應的消息類型邏輯
    // This assumes that all data sent via the websocket is JSON.
    const msg = JSON.parse(e.data);
    if (handlers[msg.type]) { handlers[msg.type](msg.data); }
  };
}

module.exports = socket;

複製代碼

'webpack/hot/dev-server' 文件以下

// => module.hot 被替換成true：在前期ast語法樹分析過程當中標識代碼位置，而後在webpack assets階段被替換
// => module.hot 被替換成true：在前期ast語法樹分析過程當中標識代碼位置，而後在webpack assets階段被替換
if(module.hot) {
var lastHash;
var upToDate = function upToDate() {
  return lastHash.indexOf(__webpack_hash__) >= 0;
};
var check = function check() {
  module.hot.check(true).then(function(updatedModules) {
    if(!updatedModules) {
      console.warn("[HMR] Cannot find update. Need to do a full reload!");
      console.warn("[HMR] (Probably because of restarting the webpack-dev-server)");
      window.location.reload();
      return;
    }

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

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

    if(upToDate()) {
      console.log("[HMR] App is up to date.");
    }

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

複製代碼

結論：被insert到客戶端瀏覽器中的這段代碼決定了 webpack熱更新HMR 的開始，當熱更新HMR模式失敗時，就直接刷新瀏覽器了

const { setup } = require('../../util'); 文件以下

module.exports = {
  setup(config) {
    const defaults = { plugins: [], devServer: {} };
    const result = Object.assign(defaults, config);
    result.plugins.push(new webpack.HotModuleReplacementPlugin());
    result.plugins.push(new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.join(__dirname, '.assets/layout.html'),
      title: exampleTitle
    }));
    return result;
  }
};
複製代碼

webpack.HotModuleReplacementPlugin 插件的做用就是：在webpack打包生成的代碼中添加功能代碼，當咱們開發時，修改某個文件並保存後，瀏覽器會拿到修改的模塊代碼，而後執行並更新依賴，固然瀏覽器如何拿到代碼以及如何執行更新，下面會講到，這裏先提一下這個插件的做用

webpack entry 入口文件app.js

'use strict';

require('./example');

if (module.hot) {
  module.hot.accept((err) => {
    if (err) {
      console.error('Cannot apply HMR update.', err);
    }
  });
}

複製代碼

webpack entry 入口文件example.js

'use strict';

const target = document.querySelector('#target');

target.innerHTML = 'Modify to update this element without reloading the page.';

複製代碼

html Template 模板文件

<!doctype html>
<html>
  <head>
    <title>WDS ▻ API: Simple Server</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/.assets/favicon.ico"/>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,600|Source+Sans+Pro:400,400i,500,600"/>
    <link rel="stylesheet" href="/.assets/style.css"/>
  </head>
	<body>
    <main>
      <header>
        <h1>
          <img src="/.assets/icon-square.svg" style="width: 35px; height: 35px;"/>
          webpack-dev-server
        </h1>
      </header>
      <section>
        <h2>API: Simple Server</h2>
        <div id="target"></div>
      </section>
       <section>
        <div id="targetmodule"></div>
      </section>
    </main>
	<script type="text/javascript" src="main.js"></script></body>
</html>

複製代碼

以上是涉及到的一些文件...

下面來看具體的效果： 運行 node --inspect-brk server.js 文件，訪問http://localhost:8080

上圖左側是 webpack-dev-server 中 websockets server端的代碼，藉助webpack-dev-middleware註冊webapck打包生命週期事件回調函數，將打包過程關鍵生命點同步到客戶端瀏覽器(右側) ，從console處能夠知道收到了消息類型type：hot、hash、ok。其中hot類型是告訴客戶端瀏覽器更新代碼的方式採用熱更新HMR 的方式，而不是採用熱重載live reload 直接刷新瀏覽器的方式，hash是本次webpack打包後的hash值， ok標識webpack打包生命週期已經完成，能夠進行客戶端瀏覽器代碼的更新操做了，也就是 webpack熱更新HMR的過程。

下面當修改 example.js 文件 也就是瀏覽器如何更新代碼流程關鍵時刻到了

//target.innerHTML = 'Modify to update this element without reloading the page.';
target.innerHTML = '熱更新HMR的模式';

複製代碼

文件變化後，webpack.HotModuleReplacementPlugin 插件中關鍵的 webpack Compilation 對象事件回調函數以下

compilation.plugin("record", function(compilation, records) {
  // 生成的 records 用於當文件變化後找出變話的模塊
  debugger
  if(records.hash === this.hash) return;
  records.hash = compilation.hash;
  records.moduleHashs = {};
  // 循環每一個module, webpack中一個文件就是一個module，且經過hash值判斷文件是否有更改
  this.modules.forEach(function(module) {
    var identifier = module.identifier();
    var hash = require("crypto").createHash("md5");
    module.updateHash(hash);
    records.moduleHashs[identifier] = hash.digest("hex");
  });
  records.chunkHashs = {};
  // this webpack compilation 對象
  this.chunks.forEach(function(chunk) {
    records.chunkHashs[chunk.id] = chunk.hash;
  });
  records.chunkModuleIds = {};
  this.chunks.forEach(function(chunk) {
    records.chunkModuleIds[chunk.id] = chunk.modules.map(function(m) {
      return m.id;
    });
  });
});
var initialPass = false;
var recompilation = false;
compilation.plugin("after-hash", function() {
  // records 相應的hash 決定模塊變化以後的標識
  debugger
  var records = this.records;
  if(!records) {
    initialPass = true;
    return;
  }
  if(!records.hash)
    initialPass = true;
  var preHash = records.preHash || "x";
  var prepreHash = records.prepreHash || "x";
  if(preHash === this.hash) {
    recompilation = true;
    this.modifyHash(prepreHash);
    return;
  }
  records.prepreHash = records.hash || "x";
  records.preHash = this.hash;
  // complain 對象的hash值
  this.modifyHash(records.prepreHash);
});
compilation.plugin("additional-chunk-assets", function() {
  // 這裏當modul變化以後，找出變化的module 並並生成json 和對應的module Template模板信息
  debugger
  var records = this.records;
  if(records.hash === this.hash) return;
  if(!records.moduleHashs || !records.chunkHashs || !records.chunkModuleIds) return;
  // 循環遍歷module 經過hash值標識module是否變化了
  this.modules.forEach(function(module) {
    var identifier = module.identifier();
    var hash = require("crypto").createHash("md5");
    module.updateHash(hash);
    hash = hash.digest("hex");
    module.hotUpdate = records.moduleHashs[identifier] !== hash;
  });
  // this.hash webpack Compilation 對象的hash值
  var hotUpdateMainContent = {
    h: this.hash,
    c: {}
  };
  // records.chunkHashs 包含了 全部chunk的hash值信息
  Object.keys(records.chunkHashs).forEach(function(chunkId) {
    chunkId = isNaN(+chunkId) ? chunkId : +chunkId;
    // 修改文件致使module 變化 => 找到對應的chunk
    var currentChunk = this.chunks.find(chunk => chunk.id === chunkId);
    if(currentChunk) {
      // 經過chunk 來肯定是哪一個module變化了
      var newModules = currentChunk.modules.filter(function(module) {
        return module.hotUpdate;
      });
      var allModules = {};
      currentChunk.modules.forEach(function(module) {
        allModules[module.id] = true;
      });
      // 若是項目中有某個模塊沒有引用了 就會找出改模塊
      var removedModules = records.chunkModuleIds[chunkId].filter(function(id) {
        return !allModules[id];
      });
      // 若是發生了模塊module的變化
      if(newModules.length > 0 || removedModules.length > 0) {
        // 根據變化的module 獲得 module字符串模板
        var source = hotUpdateChunkTemplate.render(chunkId, newModules, removedModules, this.hash, this.moduleTemplate, this.dependencyTemplates);
        var filename = this.getPath(hotUpdateChunkFilename, {
          hash: records.hash,
          chunk: currentChunk
        });
        this.additionalChunkAssets.push(filename);
        // filename 就是： `${currentChunk}.${records.hash}.hot-update.js}` => 0.9236d98784cee1af7a96.hot-update.js文件
        this.assets[filename] = source;
        // 標識module變化了
        hotUpdateMainContent.c[chunkId] = true;
        currentChunk.files.push(filename);
        this.applyPlugins("chunk-asset", currentChunk, filename);
      }
    } else {
      hotUpdateMainContent.c[chunkId] = false;
    }
  }, this);
  // 下面是 `${records.hash}.hot-update.json` => 9236d98784cee1af7a96.hot-update.json 文件內容
  var source = new RawSource(JSON.stringify(hotUpdateMainContent));
  var filename = this.getPath(hotUpdateMainFilename, {
    hash: records.hash
  });
  this.assets[filename] = source;

  // 注： 以上添加到this.assets 的內容在 Compiler.emitAssets 階段 生成文件內容
});

複製代碼

結論：當文件變化後，webpack 就會編譯生成 hot-update.json、以及對應的文件模塊hot-update.js信息用於在Compiler.emitAssets 階段生成js文件

webpack 打包完過後，如何通知瀏覽器呢？以下webpack-dev-server Server.js文件

function Server(compiler, options) {
  // debugger
  // Default options
  if (!options) options = {};

  // webpack 配置中的屬性，決定經過熱更新的方式
  this.hot = options.hot || options.hotOnly;

  compiler.plugin('done', (stats) => {
    // 這裏註冊 webpack compiler 對象的事件， 經過websockets 通知客戶端瀏覽器
    debugger
    this._sendStats(this.sockets, stats.toJson(clientStats));
    this._stats = stats;
  });

  // Init express server
  const app = this.app = new express(); // eslint-disable-line

  app.all('*', (req, res, next) => { // eslint-disable-line
    if (this.checkHost(req.headers)) { return next(); }
    res.send('Invalid Host header');
  });

  // webpackDevMiddleware 監聽文件的變換 watch -> build
  // middleware for serving webpack bundle
  this.middleware = webpackDevMiddleware(compiler, options);
  // ...
  this.listeningApp = http.createServer(app);
  // ...
}

// delegate listen call and init sockjs
Server.prototype.listen = function (port, hostname, fn) {
  this.listenHostname = hostname;
  // eslint-disable-next-line

  const returnValue = this.listeningApp.listen(port, hostname, (err) => {
    const sockServer = sockjs.createServer({
      // Use provided up-to-date sockjs-client
      sockjs_url: '/__webpack_dev_server__/sockjs.bundle.js',
      // Limit useless logs
      log(severity, line) {
        if (severity === 'error') {
          log(line);
        }
      }
    });

    sockServer.on('connection', (conn) => {
      if (!conn) return;
      if (!this.checkHost(conn.headers)) {
        this.sockWrite([conn], 'error', 'Invalid Host header');
        conn.close();
        return;
      }
      this.sockets.push(conn);

      conn.on('close', () => {
        const connIndex = this.sockets.indexOf(conn);
        if (connIndex >= 0) {
          this.sockets.splice(connIndex, 1);
        }
      });
      // 這裏根據webpackConfig 中的配置 devServer.hot= true 通知客戶端瀏覽 更新代碼的方式
      if (this.hot) this.sockWrite([conn], 'hot');

      if (!this._stats) return;
      this._sendStats([conn], this._stats.toJson(clientStats), true);
    });

    if (fn) {
      fn.call(this.listeningApp, err);
    }
  });

  return returnValue;
};

Server.prototype.sockWrite = function (sockets, type, data) {
  sockets.forEach((sock) => {
    sock.write(JSON.stringify({
      type,
      data
    }));
  });
};

// send stats to a socket or multiple sockets
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'); }
};

module.exports = Server;
複製代碼

當客戶端瀏覽器收到消息後 type: ok 消息類型發生時，流程以下： webpack打包後的部分代碼

//webpack/hot/dev-server.js 也就是webpack 入口添加的文件
module.hot.check(true).then(function(updatedModules) {}).catch(function(updatedModules) {})

// 進入
function hotCheck(apply) {
  if(hotStatus !== "idle") throw new Error("check() is only allowed in idle status");
  hotApplyOnUpdate = apply;
  hotSetStatus("check");
  return hotDownloadManifest().then(function(update) {
  
    // update.c標識對應的chunk是否發生了變化
    hotAvailableFilesMap = update.c;
    hotUpdateNewHash = update.h;

    hotSetStatus("prepare");
    var promise = new Promise(function(resolve, reject) {
    });
    // 開始請求 hot-update.json 文件 
     hotEnsureUpdateChunk(chunkId);
    return promise;
  });
}

// 請求以前webpack 生成的hot-update.json文件
function hotDownloadManifest() { // eslint-disable-line no-unused-vars
  return new Promise(function(resolve, reject) {
    if(typeof XMLHttpRequest === "undefined")
      return reject(new Error("No browser support"));
    try {
      var request = new XMLHttpRequest();
      var requestPath = __webpack_require__.p + "" + hotCurrentHash + ".hot-update.json";
      request.open("GET", requestPath, true);
      request.timeout = 10000;
      request.send(null);
    } catch(err) {
      return reject(err);
    }
    request.onreadystatechange = function() {
      if(request.readyState !== 4) return;
        // ...
        resolve(update);
      }
    };
  });
}

// 請求以前webpack 生成的hot-update.js 文件
function hotDownloadUpdateChunk(chunkId) { // eslint-disable-line no-unused-vars
  var head = document.getElementsByTagName("head")[0];
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.charset = "utf-8";
  script.src = __webpack_require__.p + "" + chunkId + "." + hotCurrentHash + ".hot-update.js";
  head.appendChild(script);
}

// 請求的js文件執行以下代碼
function webpackHotUpdateCallback(chunkId, moreModules) { // eslint-disable-line no-unused-vars
  hotAddUpdateChunk(chunkId, moreModules);
  if(parentHotUpdateCallback) parentHotUpdateCallback(chunkId, moreModules);
} ;

// 後續部分邏輯...
while(queue.length > 0) {
  moduleId = queue.pop();
  module = installedModules[moduleId];
  if(!module) continue;

  var data = {};

  // Call dispose handlers
  var disposeHandlers = module.hot._disposeHandlers;
  for(j = 0; j < disposeHandlers.length; j++) {
    cb = disposeHandlers[j];
    cb(data);
  }
  hotCurrentModuleData[moduleId] = data;

  // disable module (this disables requires from this module)
  module.hot.active = false;

  // 刪除緩存
  // remove module from cache
  delete installedModules[moduleId];

  // remove "parents" references from all children
  for(j = 0; j < module.children.length; j++) {
    var child = installedModules[module.children[j]];
    if(!child) continue;
    idx = child.parents.indexOf(moduleId);
    if(idx >= 0) {
      child.parents.splice(idx, 1);
    }
  }
}

// 插入變化的模塊
// insert new code
for(moduleId in appliedUpdate) {
  if(Object.prototype.hasOwnProperty.call(appliedUpdate, moduleId)) {
    modules[moduleId] = appliedUpdate[moduleId];
  }
}

// 插入模塊後， 從新執行js文件，這個過程瀏覽器是沒有刷新的，能夠經過瀏覽器Network看出
// Load self accepted modules
for(i = 0; i < outdatedSelfAcceptedModules.length; i++) {
  var item = outdatedSelfAcceptedModules[i];
  moduleId = item.module;
  hotCurrentParents = [moduleId];
  try {
    __webpack_require__(moduleId);
  } catch(err) {}
}

// __webpack_require__(moduleId); 再次進入 app.js 文件執行 =>

/* 37 */
/***/ (function(module, exports, __webpack_require__) {
 "use strict";

__webpack_require__(71);

if (true) {
  module.hot.accept((err) => {
    if (err) {
      console.error('Cannot apply HMR update.', err);
    }
  });
}
複製代碼

最後再總結一下整個熱更新HMR流程吧：

當咱們修改文件並保存時，webpack-dev-server 經過 webpack-dev-middleware 可以拿到webpack打包過程的各個生命週期點， webpack打包過程經過HotModuleReplacementPlugin插件生成hot-update.js和hot-update.json文件，前者是變化的模塊字符串信息，後者是本次打包以後module模塊所對應的chunk信息以及打包後的hash值，決定客戶端瀏覽器是否更新。而後webpack-dev-server 經過 websockets把消息發送給客戶端瀏覽器，瀏覽器收到消息後，分別請求這兩個文件，後續爲刪除installedModules全局緩存對象，並從新賦值，再次執行對應的文件，這樣就達到了在無刷新瀏覽器的條件下，更新變化的模塊了，webpack更新模塊的代碼比較複雜，有的細節沒有debug到，到此從Server 到 Client流程以及從Client 到 Server流程也就說清楚了

最後

內容有點多，筆誤請諒解！涉及到的相關技術點有的沒有提到，好比webpack的打包流程、webpack中檢測文件變化的模塊、webpack-dev-middleware相關、webpack-dev-server模塊還有請求轉發等功能沒有說到，這個也不在討論範圍內，有興趣的能夠本身clone 代碼查看，若是你對webpack打包流程 debug 過相信再來了解這些東西會好不少不少...

可能會有同窗會說：看這些有什麼做用，固然對我來講是當時的好奇心，經過了解大牛的代碼實現，能學習到相關優秀的lib庫、加強本身對代碼的閱讀能力。再有就是了解了一些底層再對其使用時，也能遊刃有餘。

參考：
一、zhuanlan.zhihu.com/p/30669007
二、fed.taobao.org/blog/taofed…
三、github.com/webpack/tap… webpack 如何管理生命週期的核心庫
四、astexplorer.net 對了解webpack 如何對代碼進行ast分析對照頗有用