webpack系列1-构建过程

配置示例

// webpack.config.js
const path = require("path");
module.exports = {
  entry: path.resolve(__dirname, "../src/index.js"),
  output: {
    filename: "[name].[hash].js",
    path: path.resolve(__dirname, "../dist"),
  },
};

前言

在阅读本文之前，我就默认你已经掌握了 webpack 的基本配置

webpack 是一个构建工具，整个 webpack 构建过程就像一条流水线一样，经过层层处理才能得到最终结果，这个过程中每一个环节都是独立的、解耦的、这些能力基于 webpack 的事件流机制

构建流程

图例

说明

• webpack 的初始阶段
  • 初始化一些参数
  • 生成一个 Compiler 对象
    • 只做一次初始
    • 包含了整个 webpack 的上下文环境，以及 loader、plugin 等
  • 执行内部的插件（SingleEntryPlugin）
  • 启动 run 执行编译
• webpack 的构建阶段
  • 编译时候生成一个 compliation 对象
    • 负责整个编译过程，包含了每个构建环节所对应的方法
    • 每次的文件更新，会重新生成 compliation 对象
  • make 阶段开始从入口制作
  • build 阶段分析依赖，获取转换后的内容
  • seal 阶段将内容打包成一个包含多个模块的 chunk
  • emit 阶段将 compiler 负责 compliation 生成好的 chunk 写到文件系统
  • done 阶段完成

小结

整个 webpack 的 Compiler、Compliation 都是继承了 Tabable 类 后续会介绍 Tabable

源码主流程实现参考