主要部分

• 每个文件都是一个模块

• 互相引用，会形成一个ModuleGraph，数据结构

• 模块会被合并成chunk, chunk被合并成chunk组

chunk类型

• initial：入口main chunk,

• non-initial: 可以延迟加载的块

  • 可以在动态导入的时候，使用 魔术注释 ，指定chunk名称；

  •   import(
      /* webpackChunkName: "app" */
      './app.jsx'
      ).then(App => ReactDOM.render(<App />, root));
    

• 结构：[['chunkIds'],[{ module1Name: function(){}} ]]

webpack加载模块

• const module = __webpack_require__(moduleId)：加载模块
  • __webpack_modules__[moduleId](module, module.exports, __webpack_require__): 执行模块
• module: 创建的新模块
  • 格式：{ exports:{} }

output

• 输出文件的名称会受配置中的两个字段的影响：

  • output.filename - 用于 initial chunk 文件
  • output.chunkFilename - 用于 non-initial chunk 文件