webpack 编译流程

最新推荐文章于 2025-06-18 23:50:48 发布
最新推荐文章于 2025-06-18 23:50:48 发布
阅读量1.1k 收藏 4
点赞数 2
CC 4.0 BY-SA版权
分类专栏： webpack 文章标签： webpack 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52834435/article/details/126996897
本文详细介绍了Webpack的编译流程，包括初始化参数、构建Compiler对象、加载插件、执行run方法、查找入口文件、模块编译及依赖分析、组装Chunk、生成输出文件等步骤，并深入探讨了Compiler和Compilation的概念及其区别。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

webpack 编译流程

文章目录

整体流程

  1. 初始化参数：从配置文件和Shell语句中读取并合并参数,得出最终的配置对象
  2. 用上一步得到的参数初始化Compiler对象
  3. 加载所有配置的插件(依次调用插件中的apply方法)
  4. 执行对象的run(Compiler.run)方法开始执行编译
  5. 根据配置中的entry找出入口文件
  6. 从入口文件出发,调用所有配置的Loader对模块进行编译
  7. 再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
  8. 根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk
  9. 再把每个Chunk转换成一个单独的文件加入到输出列表
  10. 在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统(dist/build目录)

在以上过程中，Webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果

在这里插入图片描述


一些细节

根据配置中的entry找出入口文件后，从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理，再根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk。

在上面的这一步骤中，具体流程如下：

  1. 获取主模块内容

  2. 分析模块

  • 安装@babel/parser包（转AST）
  1. 对模块内容进行处理
  • 安装@babel/traverse包（遍历AST收集依赖）
  • 安装@babel/core和@babel/preset-env包 （es6转ES5）

  1. 递归所有模块

  2. 生成最终代码


核心概念

  • Entry：入口，webpack构建的起始

  • Module：模块，webpack里面一切皆模块，也是代表着文件，从Entry配置的入口文件开始，递归找出依赖的模块

  • Chunk：代码块，找出递归依赖模块经转换后组合成代码块

  • Loader：模块转换器，也就是将模块的内容按照需求装换成新内容

  • Plugin：扩展插件，webpack构建过程中，会在特定的时机广播对应的事件，而插件可以监听这些事件的发生


Compiler 和 Compilation 的区别

webpack 打包离不开 Compiler 和 Compilation,它们两个分工明确，理解它们是我们理清 webpack 构建流程重要的一步。


Compiler

Compiler 负责监听文件和启动编译 它可以读取到 webpack 的 config 信息，整个 Webpack 从启动到关闭的生命周期，一般只有一个 Compiler 实例，整个生命周期里暴露了很多方法，常见的 run,make,compile,finish,seal,emit 等，我们写的插件就是作用在这些暴露方法的 hook 上

compiler 对象中保存着完整的 Webpack 环境配置，每次启动 webpack 构建时它都是一个独一无二，仅仅会创建一次的对象。

这个对象会在首次启动 Webpack 时创建，我们可以通过 compiler 对象上访问到 Webapck 的主环境配置，比如 loader 、 plugin 等等配置信息。

它有以下主要属性：

  • compiler.options 可以访问本次启动 webpack 时候所有的配置文件，包括但不限于 loaders 、 entry 、 output 、 plugin 等等完整配置信息。
  • compiler.inputFileSystem 和 compiler.outputFileSystem 可以进行文件操作，相当于 Nodejs 中 fs。
  • compiler.hooks 可以注册 tapable 的不同种类 Hook，从而可以在 compiler 生命周期中植入不同的逻辑。

Compilation

Compilation 负责构建编译。 每一次编译（文件只要发生变化，）就会生成一个 Compilation 实例，Compilation 可以读取到当前的模块资源，编译生成资源，变化的文件，以及依赖跟踪等状态信息。同时也提供很多事件回调给插件进行拓展。

一个 compilation 对象会对构建依赖图中所有模块，进行编译。 在编译阶段，模块会被加载(load)、封存(seal)、优化(optimize)、 分块(chunk)、哈希(hash)和重新创建(restore)。

它有以下主要属性：

  • compilation.modules 可以访问所有模块，打包的每一个文件都是一个模块。
  • compilation.chunks chunk 即是多个 modules 组成而来的一个代码块。入口文件引入的资源组成一个 chunk，通过代码分割的模块又是另外的 chunk。
  • compilation.assets 可以访问本次打包生成所有文件的结果。
  • compilation.hooks 可以注册 tapable 的不同种类 Hook，用于在 compilation 编译模块阶段进行逻辑添加以及修改。

Webpack 内部的钩子

钩子的本质就是：事件。为了方便我们直接介入和控制编译过程，webpack 把编译过程中触发的各类关键事件封装成事件接口暴露了出来。这些接口被很形象地称做：hooks（钩子）。开发插件，离不开这些钩子


一些问题

  1. webpack 与 babel 分别实现了什么？
  • Webpack 读出 AST 之后仅遍历 AST 集合；babel 则对源码做等价转换
  1. Webpack 编译过程中，如何识别资源对其他资源的依赖？
  • Webpack 遍历 AST 集合过程中，识别 require/ import 之类的导入语句，确定模块对其他资源的依赖关系

生命周期简图

在这里插入图片描述

webpack-编译过程分析
张印的博客
02-18 1002
webpack 编译过程 {ignore} webpack 的作用是将源代码编译（构建、打包）成最终代码 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KOylt0bl-1582009061629)(assets/2020-01-09-10-26-15.png)] 整个过程大致分为三个步骤 初始化 编译 输出 ## 初始化 此阶段，webpack会将CLI参数、...
前端工程化之：webpack1-6(编译过程)
m0_60189088的博客
01-26 1956
初始化时我们运行的命令 webpack 为核心包， webpack-cli 提供了 webpack 命令，通过命令启动 webpack ，webpack 命令就是在调用核心包里面的功能。
Webpack---编译过程
qq_41962068的博客
09-18 375
webpack 编译过程 {ignore} 文章目录webpack 编译过程 {ignore}初始化编译输出总过程 webpack 的作用是将源代码编译（构建、打包）成最终代码 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bdvJgXQO-1600414125669)(assets/2020-01-09-10-26-15.png)] 整个过程大致分为三个步骤 初始化 编译 输出 初始化 此阶段，webpack会将CLI参数、配置文件、默认配置进行融合，形成一个最终的配
Webpack 的 Compiler 与 Compilation
最新发布
在所有的事情背后，要有一颗坚定的的本心，要有一颗应对变革和提升自我的本心，世界瞬息万变，本心要坚持到底，保持学习，时刻复盘
06-18 809
Webpack的核心构建过程围绕Compiler与Compilation两个对象展开。Compiler作为全局编译环境，管理配置、插件和整个构建生命周期，只实例化一次。它提供丰富的钩子函数，控制从初始化到完成的完整流程，并支持watch模式。Compilation则代表单次编译过程，处理模块依赖、资源生成等具体任务。通过这两个对象的协作，Webpack实现了模块化构建的强大功能，开发者可以通过插件系统在关键生命周期节点进行干预和扩展。
一文掌握Webpack编译流程
chern1992的博客
06-18 4545
本文概要 Webpack事件流机制 Webpack流程概览 Webpack流程图示 Webpack流程详解 Webpack执行流程源码分析 Webpack事件流机制 Webpack是基于事件流的插件集合，它的工作流程就是将各个插件串联起来，而实现这一切的核心就是Tapable，Tapable是一个类似Node.js的EventEmitter的库,主要是控制钩子函数的发布与订阅，控制着webpack的插件系统。Webpack中最核心的负责编译的Compile
Webpack编译过程
jydchudq的博客
07-10 756
众所周知，webpack 的作用是将源代码编译（构建、打包）成最终代码。整个过程可以概括为三个步骤：初始化、编译、输出。
webpack编译过程
xun__xing的博客
08-22 1094
编译过程一、编译过程1.初始化2.编译3.输出4.总过程 一、编译过程 webpack 的作用是将源代码编译（构建、打包）成最终代码 整个过程大致分为三个步骤 初始化 编译 输出 1.初始化 此阶段，webpack会将CLI参数、配置文件、默认配置进行融合，形成一个最终的配置对象。 例： 以及终端命令，整理成最终配置对象 对配置的处理过程是依托一个第三方库yargs完成的 此阶段相对比较简单，主要是为接下来的编译阶段做必要的准备 目前，可以简单的理解为，初始化阶段主要用于产生一个最终的配置 2.
(源码)基于webpack框架的编译流程解析项目.zip
04-15
# 基于webpack框架的编译流程解析项目 ## 项目简介 这是一个基于webpack框架的编译项目，核心聚焦于webpack的编译流程。项目借助webpack的核心对象Compiler和Compilation管理整个编译过程，同时利用插件系统扩展...
详解webpack编译速度提升之DllPlugin
10-17
Webpack 的 DllPlugin 是一种优化技术，用于提升...通过以上步骤，你就可以实现 Webpack 编译速度的大幅提升，优化开发流程，提高工作效率。在大型项目或需要频繁构建的环境中，使用 DllPlugin 是非常必要的优化手段。
electronwebpack使用webpack编译Electron应用程序的脚本和配置
08-07
在本文中，我们将深入探讨如何使用 electron-webpack 编译 Electron 应用程序的脚本和配置。 首先，了解 Electron 是至关重要的。Electron 是一个开源框架，允许开发者使用 JavaScript、HTML 和 CSS 创建跨平台的...
Webpack编译的广告服务器应用：优化横幅广告制作流程
资源摘要信息:"wp-creative-server:一个管理所有广告尺寸，变体和投放的Webpack编译的应用" 在现代网络广告中，Webpack已成为构建和优化广告资产的关键工具。Webpack是一个现代JavaScript应用程序的静态模块打包器...
webpack编译流程漫谈
weixin_34037173的博客
08-25 340
前言 weback在web构建工具的激烈竞争中逐渐脱引而出。 无论是编译速度、报错提示、可扩展性等都给前端开发者耳目一新的感觉。本篇文章是个人对webpack的一点小研究总结。 webpack在开发者社区的反馈 类似gulp把自己定位为stream building tools一样，webpack把自己定位为module building system。在webpack看来，所有...
webpack编译过程-学习记录
m0_46258749的博客
07-18 330
webpack 的作用是将源代码编译（构建、打包）成最终代码，对于webpack的打包过程，我们大概可以分为三步走： 初始化化阶段 对于此阶段，webpack会将cli参数、配置文件、默认配置进行融合，形成一个最终的配置对象。 cli参数:在cmd环境下，npx webpack –mode=development。 配置文件：就是你文件webpack.config.js中一些配置。 编译阶段 1.创建chunk 根据入口模块（默认./src/index.js)创建一个chunk，每个chunk都至少有两个
webpack 复习（三）编译过程分析
爱前端的程序媛的博客
03-30 1270
1. 上一篇文章问题答案 2. webpack 编译流程分析
跟着源码了解Webpack编译流程
奇舞周刊
11-10 863
最近粗略阅读了一下Webpack的源码，对其打包的流程有了一定的了解，接下来结合源码，和大家分享一下webpack的打包流程；同时在文章最后，会有一个简易的Webpack的实现，提供大家参...
webpack原理----编译过程
web_ming的博客
03-29 473
webpack4版本将webpack和webpack-cli分离，webpack是webpack核心包，通过webpack-cli命令行将其运行 根据入口文件，webpack将项目从入口文件src打包到dist文件的过程，称之为编译过程，该过程需在node环境下执行，因为在这里面涉及到许多读取文件的操作，浏览器环境下不能读取文件。 webpack编译过程分三步： 初始化 编译 产生资源列表 ...
Webpack编译结果浅析
weixin_33737774的博客
10-11 317
如今Webpack已经是一个不可或缺的前端构建工具，借助这个构建工具，我们可以使用比较新的技术（浏览器不能直接支持）来开发。 你是否好奇你写的代码经过Webpack构建之后会生成什么东西？是否有时调试遇到莫名其妙的问题？ 本文不讲如何进行配置，只是基于几个基础的例子，简要分析一下 webpack@4.20.2 构建后的代码结构，当然了，并不全面，时间问题能力问题还不能理解到位。 代码比较长，...
webpack编译svg
01-25
### 如何配置 Webpack 编译和加载 SVG 文件 #### 使用 `svg-inline-loader` 加载内联SVG文件 对于希望在React组件中直接使用SVG文件的情况，可以采用`svg-inline-loader`来实现。这有助于简化开发流程并允许更灵活的操作SVG内容[^2]。 ```javascript module.exports = { module: { rules: [ { test: /\.svg$/, use: ['svg-inline-loader'] } ] } }; ``` 上述配置使得所有匹配`.svg`扩展名的模块都将被`svg-inline-loader`处理，从而可以直接作为JSX中的标签引入到React组件里。 #### Vue项目中批量导入SVG图标 针对Vue框架下的应用，在项目的入口文件（如`main.js`或`main.ts`），可以通过编程方式批量导入位于特定目录下的所有SVG文件。这种方法不仅提高了效率也增强了灵活性[^3]。 ```javascript import { createApp } from 'vue'; import App from './App.vue'; // 批量导入SVG图标 const req = require.context('./assets/icons', false, /\.svg$/); req.keys().forEach(req); createApp(App).mount('#app'); ``` 这段代码利用了Webpack提供的`require.context()`函数创建了一个上下文环境，用于按需加载指定路径下所有的SVG资源，并立即执行这些请求以完成实际的导入操作。 #### 利用 `svg-react-loader` 实现更多功能 如果目标是在React环境中进一步增强对SVG的支持，则可以选择`svg-react-loader`。它除了支持基本的内联SVG外，还提供了诸如SVG组合、优化以及动态生成等功能，能够更好地满足复杂应用场景的需求[^1]。 ```javascript { test: /\.(svg)(\?.*)?$/, loader: "svg-react-loader" } ``` 此规则定义告诉Webpack当遇到SVG文件时应该调用哪个loader来进行转换工作。通过这种方式，不仅可以享受内联带来的便利，还能借助额外特性提高性能与用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序媛小y

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值