Webpack源码浅析

原创

已于 2024-03-14 11:30:02 修改 · 1.6k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #前端 #node.js

于 2024-02-05 08:46:21 首次发布

本文深入剖析了Webpack的启动方式，包括直接启动和通过引入包启动。重点解析了Webpack的编译起点，如Compiler和Compilation类，以及process、compiler.run()、compiler.compile()、compilation.seal()和compiler.hooks.emit.callAsync()等关键步骤。Webpack通过Compiler实例化和Compilation对象处理模块依赖关系，形成依赖树，并在编译完成后输出文件。

webpack启动方式

webpack有两种启动方式：

通过webpack-cli脚手架来启动，即可以在Terminal终端直接运行；
```
webpack ./debug/index.js --config ./debug/webpack.config.js
```
通过require('webpack')引入包的方式执行；其实第一种方式最终还是会用require的方式来启动webpack，可以查看./bin/webpack.js文件

webpack编译的起点

从const compiler = webpack(config)开始

webpack函数源码(./lib/webpack.js)：

const webpack = (options, callback) => {
    let compiler = createCompiler(options)
    // 如果传入callback函数，则自启动
    if(callback){
        compiler.run((err, states) => {
            compiler.close((err2)=>{
                callbacl(err || err2, states)
            })
        })
    }
    return compiler
}

webpack函数执行后返回compiler对象，在webpack中存在两个非常重要的核心对象，分别为compiler和compilation，它们在整个编译过程中被广泛使用。

Compiler类(./lib/Compiler.js)：webpack的主要引擎，在compiler对象记录了完整的webpack环境信息，在webpack从启动到结束，compiler只会生成一次。你可以在compiler对象上读取到webpack config信息，outputPath等；
Compilation类(./lib/Compilation.js)：代表了一次单一的版本构建和生成资源。compilation编译作业可以多次执行，比如webpack工作在watch模式下，每次监测到源文件发生变化时，都会重新实例化一个compilation对象。一个compilation对象表现了当前的模块资源、编译生成资源、变化的文件、以及被跟踪依赖的状态信息。