Webpack 编译流程

date
Feb 3, 2022
slug
webpack
status
Published
tags
原理
summary
了解 Webpack 的原理之后，才可以更好的写插件或对应 Lodeder。
type
Post
  1. 初始化参数
  1. 加载所有配置的插件等待触发
  1. 初始化 Compiler 对象后，执行 run 方法开始编译
  1. 编译后会创建 Compilation 对象，用于走构建流程
  1. 从入口路径开始递归
  1. 匹配文件交给对应 loader 处理
  1. 把文件编译成一个个 chunk.js
  1. 再根据配置将 chunk 转换成对应文件
  1. 打包到输出目录
      2. flowchart TD
  config[webpack config]
  entry[entry/**/*]
  js[chunk.js..]
  files[ts/vue/less..]
  loader[..*loader]
  config --> run{run}
  subgraph flow
    run --> Complier
    run -.- |dev mode| Compilation
    Complier --> entry
    Compilation -.-> entry
    entry --> files
    files --> loader
    files -.->|change file| Compilation
    loader --> js
    js --> output
  end
  output --> /dist
  flow --> tapable
  tapable -->|build trigger event| hooks
  hooks --> plugin
  plugin --> flow
 
虚线部分则是开发环境的监听模式，每次文件的改变都会触发 Complier 事件，重新走构建流程，每次的 Compilation 都是一个新的实例，从新的实例中重新构建代码，从而实现热更新。

© jianxiaoBai 2021 - 2024