源码文件如下

image.png

  1. // common.js
  2. module.exports = 'common';
  4. // index.js
  5. let str = require('./common.js');
  6. console.log(str);

就是在 index.js 中引入 common.js 模块, 简单看看webpack是怎么处理模块引用

输出代码

在 dist 目录下获得通过上一节生成的 bundle.js 文件, 去掉多余的注释和目前没用的声明: 

  1. (function(modules) { // webpackBootstrap
  2.     // The module cache
  3.   // 代码模块缓存池, 将执行过的代码模块缓存起来
  4.     var installedModules = {};
  6.     // The require function
  7.   // 实现模块化代码的主要函数, 通过以文件名为模块id(moduleId)递归调用
  8.     function __webpack_require__(moduleId) {
  9.         // Check if module is in cache
  10.     // 若模块已缓存, 则直接调用
  11.         if(installedModules[moduleId]) {
  12.             return installedModules[moduleId].exports;
  13.         }
  15.         // Create a new module (and put it into the cache)
  16.     // 创建新的模块代码, 并把模块缓存
  17.         var module = installedModules[moduleId] = {
  18.             i: moduleId,
  19.             l: false,
  20.             exports: {}
  21.         };
  23.         // Execute the module function
  24.     // 执行对应模块id的代码, 并将模块对象和方法绑定到当前module上
  25.         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  27.         // Flag the module as loaded
  28.     // 将模块已加载标识置为true
  29.         module.l = true;
  31.         // Return the exports of the module
  32.     // 返回模块对外暴露方法
  33.         return module.exports;
  34.     }
  36.   // 代码启动, 传入入口文件的模块id
  37.     return __webpack_require__(__webpack_require__.s = "./src/index.js");
  38. })
  39. ({
  40.  "./src/common.js": (function(module, exports) {
  41.     eval("module.exports = 'common';\r\n\n\n//# sourceURL=webpack:///./src/common.js?");
  42.   }),
  43.  "./src/index.js": (function(module, exports, __webpack_require__) {
  44.     eval("let str = __webpack_require__(/*! ./common.js */ \"./src/common.js\");\r\nconsole.log(str);\n\n//# sourceURL=webpack:///./src/index.js?");
  45.   })
  46. });

这段代码可以直接在浏览器中控制台执行
整体代码流程就是创建一个自执行函数, 根据文件名称递归调用内部函数 __webpack_require__(moduleId) , 从而把代码模块化

  1. line 37: 代码开始启动, 调用 __webpack_require__ 并传入入口文件模块id ./src/index.js
  2. line 17-21: 创建模块./src/index.js 并缓存至 installedModules
  3. line 25, line 43-45: 将上一步创建的模块传入 ./src/index.js 执行函数
  4. line 44: ./src/index.js 执行函数中又执行了 __webpack_require__(\"./src/common.js\")
  5. line 17-21: 类似第二步, 创建并缓存模块 ./src/common.js
  6. line 25, line 40-42: 将上一步创建的模块传入 ./src/common.js 执行函数
  7. line 41: 执行 module.exports = 'common' 即定义 ./src/common.js 模块的 exports
  8. line 29, 33: 设置 ./src/commom.js 模块已加载, 返回 module.exports
  9. line 44: 拿到模块 ./src/common.js 暴露的结果, 继续执行函数, 打印 common
  10. line 29, 33: 设置 ./src/index.js 模块已加载, 返回 module.exports
  11. 执行完成