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. 打包到输出目录
    1. 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 - 2022