function component() {
  const btn = document.createElement("button");
  btn.onclick = () => {
    import("./a.js").then((res) => {
      console.log("動(dòng)態(tài)加載a.js..", res);
    });
  };
  btn.innerHTML = "Button";
  return btn;
}
document.body.appendChild(component());

(self["webpackChunkwebpack_demo"] =
  self["webpackChunkwebpack_demo"] || []).push([
  ["src_a_js"],
  {
    "./src/a.js": () => {},
  },
]);

__webpack_require__.e("src_a_js")
  .then(__webpack_require__.bind(__webpack_require__, "./src/a.js"))
  .then((res) => {
    console.log("動(dòng)態(tài)加載a.js..", res);
  });

var inProgress = {};
// url: "http://localhost:8080/src_a_js.main.js"
// done: 加載完成的回調(diào)
const loadScript = (url, done) => {
  if (inProgress[url]) {
    inProgress[url].push(done);
    return;
  }
  const script = document.createElement("script");
  script.charset = "utf-8";
  script.src = url;
  inProgress[url] = [done];
  var onScriptComplete = (prev, event) => {
    var doneFns = inProgress[url];
    delete inProgress[url];
    script.parentNode && script.parentNode.removeChild(script);
    doneFns && doneFns.forEach((fn) => fn(event));
    if (prev) return prev(event);
  };
  script.onload = onScriptComplete.bind(null, script.onload);
  document.head.appendChild(script);
};

// 存儲(chǔ)已經(jīng)加載和正在加載的chunks，此對(duì)象存儲(chǔ)的是動(dòng)態(tài)import的chunk，對(duì)象的key是chunkId，值為
// 以下幾種：
// undefined: chunk not loaded
// null: chunk preloaded/prefetched
// [resolve, reject, Promise]: chunk loading
// 0: chunk loaded
var installedChunks = {
  main: 0,
};

const scriptUrl = document.currentScript.src
  .replace(/#.*$/, "")
  .replace(/\?.*$/, "")
  .replace(/\/[^\/]+$/, "/");
__webpack_require__.e = (chunkId) => {
  return Promise.resolve(ensureChunk(chunkId, promises));
};
const ensureChunk = (chunkId) => {
  var installedChunkData = installedChunks[chunkId];
  if (installedChunkData === 0) return;
  let promise;
  // 1.如果多次調(diào)用了__webpack_require__.e函數(shù)，即多次調(diào)用import('a.js')加載相同的模塊，只要第一次的加載還沒完成，就直接使用第一次的Promise
  if (installedChunkData) {
    promise = installedChunkData[2];
  } else {
    promise = new Promise((resolve, reject) => {
      // 2.注意，此時(shí)的resolve，reject還沒執(zhí)行
      installedChunkData = installedChunks[chunkId] = [resolve, reject];
    });
    installedChunkData[2] = promise; //3. 此時(shí)的installedChunkData 為[resolve, reject, promise]
    var url = scriptUrl + chunkId;
    var error = new Error();
    // 4.在script標(biāo)簽加載完成或者加載失敗后執(zhí)行l(wèi)oadingEnded方法
    var loadingEnded = (event) => {
      if (Object.prototype.hasOwnProperty.call(installedChunks, chunkId)) {
        installedChunkData = installedChunks[chunkId];
        if (installedChunkData !== 0) installedChunks[chunkId] = undefined;
        if (installedChunkData) {
          console.log("加載失敗.....");
          installedChunkData[1](error); // 5.執(zhí)行上面的reject，那resolve在哪里執(zhí)行呢？
        }
      }
    };
    loadScript(url, loadingEnded, "chunk-" + chunkId, chunkId);
  }
  return promise;
};

var webpackJsonpCallback = (data) => {
  var [chunkIds, moreModules] = data;
  var moduleId,
    chunkId,
    i = 0;
  for (moduleId in moreModules) {
    // 1.__webpack_require__.m存儲(chǔ)的是所有的模塊，包括靜態(tài)模塊和動(dòng)態(tài)模塊
    __webpack_require__.m[moduleId] = moreModules[moduleId];
  }
  for (; i < chunkIds.length; i++) {
    chunkId = chunkIds[i];
    if (installedChunks[chunkId]) {
      // 2.調(diào)用ensureChunk方法生成的promise的resolve回調(diào)
      installedChunks[chunkId][0]();
    }
    // 3.將該模塊標(biāo)記為0，表示已經(jīng)加載過
    installedChunks[chunkId] = 0;
  }
};
self["webpackChunkwebpack_demo"] = [];
self["webpackChunkwebpack_demo"].push = webpackJsonpCallback.bind(null);

__webpack_require__
  .e("src_a_js")
  .then(__webpack_require__.bind(__webpack_require__, "./src/a.js"))
  .then((res) => {
    console.log("動(dòng)態(tài)加載a.js..", res);
  });