Webpack的构建流程

Webpack 的构建流程主要包括以下步骤:

初始化 :启动构建,读取和合并配置参数,加载 Plugin,实例化 Compiler。
编译 :从 Entry 出发,针对每个 Module 串行调用对应的 Loader 去翻译文件的内容,再找到该 Module 依赖的 Module,递归地进行编译处理。
输出 :对编译后的 Module 进行深度优化,如模块合并、拆分等,然后将这些信息写入到 Chunk 中,再把 Chunk 转换成文件,输出到文件系统中。

以下是这个过程的伪代码:

javascript 复制代码
// 初始化
const options = readAndMergeConfigOptions();
const compiler = new Compiler(options);

// 加载插件
for (const plugin of options.plugins) {
  plugin.apply(compiler);
}

// 编译
const context = { compiler, options };
for (const entry of options.entry) {
  compileModule(context, entry);
}

// 输出
const chunks = generateChunks(context);
for (const chunk of chunks) {
  emitFile(context, chunk);
}

这个过程中,Webpack 会广播出许多事件,插件可以监听这些事件,在适当的时机添加自己的逻辑。

相关推荐
Sean_summer2 分钟前
暑期第二周
前端·数据库·python
_未完待续8 分钟前
框架实战指南-组件参考
前端·vue.js
李文旺8 分钟前
图片加载优化-Nextjs与webpack源码
前端·react.js
不想当小卡拉米8 分钟前
高德地图上marker过多(超过3000个)渲染卡顿过慢问题解决
前端
dalancon11 分钟前
WMShell初始化
前端
半花12 分钟前
【Vue】通信组件
前端·vue.js
劫大大12 分钟前
前端开发公众号或服务号,本地怎么与后端测试服接口打通呢
前端·微信
芒果12514 分钟前
【转载】vue3 Ts axios 封装
前端
蓝倾14 分钟前
京东商品SKU数据采集方式及接口说明
前端·后端·api
前端 贾公子16 分钟前
vue如何在data里使用this
前端·javascript·vue.js