1. Webpack编译结果分析

「
创建两个测试文件并使用webpack打包
」

// ./src/test.js
console.log('test.js文件执行了');
module.exports = {
    a: '123'
}

// ./src/index.js
var obj = require('./test.js');
console.log(obj.a);

// webpack编译，删除不相关内容，得到以下内容
(function (modules) {
 // The module cache // 模块缓存
 var installedModules = {};

 // The require function // require函数导入
 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;
 }
 // Load entry module and return exports // 加载入口模块
 return __webpack_require__(__webpack_require__.s = "./src/index.js");
})(
 { // 该对象保存了所有的模块，以及模块对应的代码
  "./src/index.js": (function (module, exports, __webpack_require__) {
   eval("var obj = __webpack_require__(/*! ./test.js */ \"./src/test.js\");\r\nconsole.log(obj.a);\n\n//# sourceURL=webpack:///./src/index.js?");
  }),

  "./src/test.js": (function (module, exports) {
   eval("console.log('test.js文件执行了');\r\nmodule.exports = {\r\n    a: '123'\r\n}\n\n//# sourceURL=webpack:///./src/test.js?");
  })
 }
);

2. Webpack编译过程分析

「
webpack的作用是将源代码编译（构建，打包）成最终代码，整个过程大致分为三个步骤
」

1. 初始化

❝
此阶段，webpack会将「CLI参数，配置文件，默认配置」进行融合，形成一个最终配置对象，此过程可以简单理解为，用于产生一个最终配置对象。

配置的融合处理过程依托于第三方库yargs
❞

2. 编译

编译中涉及的术语

❝
One

module：模块，分割的代码单元，webpack中的模块不限于JS

Two

chunk：编译过程根据入口文件，依次寻找依赖形成的块
chunk name：chunk的名称，根据入口配置决定，没有则使用main
chunk id：chunk的唯一编号，开发环境下，和chunkname相同，生产环境下，从0开始进行编号

Three

chunk assets：根据chunk模块列表生成的资源列表
chunk hash：根据资源列表内容生成的hash值
bundle：资源清单中的每一项为一个bundle「最终生成的文件」

Four

assets：将多个chunk assets合并成一个总资源列表
hash：根据assets总资源列表生成的hash值
❞