webpack打包后的文件如何异步加载模块

一起探索最真实的世界

上一篇我们探讨了 webpack打包后的文件如何在浏览器中运行涉及到了同步模块的加载
本次我们对main.js进行修改

main.js

// 异步加载 show.js
import('./show').then((show) => {
  // 执行 show 函数
  show('Webpack');
});

webpack

打包后的文件

| -- dist
| ---- bundle.js
| ---- 0.bundle.js

这边如果还是使用之前的webpack配置，会出现一个问题，加载0.bundle.js时会出现加载失败的问题，我们可以看下我们之前配置
webpack.config.js

const path = require('path');

module.exports = {
  // JS 执行入口文件
  entry: './main.js',
  output: {
    // 把所有依赖的模块合并输出到一个 bundle.js 文件
    filename: 'bundle.js',
    // 输出文件都放到 dist 目录下
    path: path.resolve(__dirname, './dist'),
  }
};

我们把所有的模块都输出到当前目录的dist路径下，在bundle文件中有一行代码是

script.src = __webpack_require__.p + "" + chunkId + ".bundle.js";
// **
// __webpack_public_path__
__webpack_require__.p = "";

我们可以看到我们去加载0.bundle.js时是直接加载index.html文件的同级目录下的0.bundle.js,这肯定会加载失败，那我们怎么去改变这个webpack_require_.p呢，从注释我们可以看到这个定义的是publicPath，webpack配置中就有publicPath

const path = require('path');

module.exports = {
  // JS 执行入口文件
  entry: './main.js',
  output: {
    // 把所有依赖的模块合并输出到一个 bundle.js 文件
    filename: 'bundle.js',
   // 配置publicPath
    publicPath: './dist/',
    // 输出文件都放到 dist 目录下
    path: path.resolve(__dirname, './dist'),
  }
};

此时重新

webpack

bundle.js

    (function (modules) { // webpackBootstrap
      // install a JSONP callback for chunk loading
      var parentJsonpFunction = window["webpackJsonp"];
      window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {
        // 把moreModules加入到modules中,
        // then flag all "chunkIds" as loaded and fire callback
        var moduleId, chunkId, i = 0,
          resolves = [],
          result;
        for (; i < chunkIds.length; i++) {
          chunkId = chunkIds[i];
          if (installedChunks[chunkId]) {
            resolves.push(installedChunks[chunkId][0]);
          }
          installedChunks[chunkId] = 0;
        }
        for (moduleId in moreModules) {
          if (Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
            modules[moduleId] = moreModules[moduleId];
          }
        }
        if (parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);
        while (resolves.length) {
          resolves.shift()();
        }
    
      };
    
      // The module cache
      var installedModules = {};
    
      // objects to store loaded and loading chunks
      var installedChunks = {
        1: 0
      };
    
      // The require function
      function __webpack_require__(moduleId) {
    
        // Check if module is in cache
        if (installedModules[moduleId]) {
          return installedModules[moduleId].exports;
        }
        // Create a new module (and put it into the cache)
        var module = installedModules[moduleId] = {
          i: moduleId,
          l: false,
          exports: {}
        };
    
        // Execute the module function
        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
    
        // Flag the module as loaded
        module.l = true;
    
        // Return the exports of the module
        return module.exports;
      }
    
      // This file contains only the entry chunk.
      // The chunk loading function for additional chunks
      __webpack_require__.e = function requireEnsure(chunkId) {
        var installedChunkData = installedChunks[chunkId];
        // 如果installedChunkData 为0 那代表这个模块已经被加载直接返回Promise，并resolve
        if (installedChunkData === 0) {
          return new Promise(function (resolve) {
            resolve();
          });
        }
    
        // 如果installedChunkData非空且非0，那代表现在正在请求中，返回请求的promise
        if (installedChunkData) {
          return installedChunkData[2];
        }
    
        // setup Promise in chunk cache
        var promise = new Promise(function (resolve, reject) {
          installedChunkData = installedChunks[chunkId] = [resolve, reject];
        });
        installedChunkData[2] = promise;
    
        // start chunk loading
        var head = document.getElementsByTagName('head')[0];
        var script = document.createElement('script');
        script.type = "text/javascript";
        script.charset = 'utf-8';
        script.async = true;
        script.timeout = 120000;
    
        if (__webpack_require__.nc) {
          script.setAttribute("nonce", __webpack_require__.nc);
        }
        script.src = __webpack_require__.p + "" + chunkId + ".bundle.js";
        var timeout = setTimeout(onScriptComplete, 120000);
        script.onerror = script.onload = onScriptComplete;
    
        function onScriptComplete() {
          // avoid mem leaks in IE.
          script.onerror = script.onload = null;
          clearTimeout(timeout);
          var chunk = installedChunks[chunkId];
          if (chunk !== 0) {
            if (chunk) {
              chunk[1](new Error('Loading chunk ' + chunkId + ' failed.'));
            }
            installedChunks[chunkId] = undefined;
          }
        };
        head.appendChild(script);
    
        return promise;
      };
    
      // __webpack_public_path__
      __webpack_require__.p = "./dist/";
    
      // Load entry module and return exports
      return __webpack_require__(__webpack_require__.s = 0);
    })
    /************************************************************************/
    ([
      /* 0 */
      /***/
      (function (module, exports, __webpack_require__) {
    
        // 异步加载 show.js
        __webpack_require__.e /* import() */ (0).then(__webpack_require__.bind(null, 1)).then((show) => {
          // 执行 show 函数
          show('Webpack');
        });
      })
    ]);

可以看到，webpack异步加载模块是通过jsonp的方式，我们看到入口模块函数中，先去调用 webpack_require.e(0) 加载模块0.bundle.js
0.bundle.js

webpackJsonp([0],[
/* 0 */,
/* 1 */
/***/ (function(module, exports) {
function show(content) {
  window.document.getElementById('app').innerText = 'Hello,' + content;
}
// 通过 CommonJS 规范导出 show 函数
module.exports = show;
/***/ })
]);

一旦通过动态创建的script加载0.bundle.js后，就会执行webapckJsonp··

webpack打包后的文件如何异步加载模块

推荐阅读更多精彩内容