前言
webpack 在前端工程领域起到了中流砥柱的作用，理解它的内部实现机制会对你的工程建设提供很大的帮助（不论是定制功能还是优化打包）。
下面我们基于 webpack5 源码结构，对整个打包流程进行简单梳理并进行实现，便与思考和理解每个阶段所做的事情，为今后扩展和定制工程化能力打下基础。
一、准备工作
在流程分析过程中我们会简单实现 webpack 的一些功能，部分功能的实现会借助第三方工具：
// 创建仓库mkdir webpack-demo && cd webpack-demo && npm init -y
// 安装 babel 相关依赖npm install @babel/parser @babel/traverse @babel/types @babel/generator -D
// 安装 tapable（注册/触发事件流）和 fs-extra 文件操作依赖npm install tapable fs-extra -D
复制代码
接下来我们在 src 目录下新建两个入口文件和一个公共模块文件：
mkdir src && cd src && touch entry1.js && touch entry2.js && touch module.js
复制代码
并分别为文件添加一些内容：
// src/entry1.jsconst module = require('./module');const start = () => 'start';start();console.log('entry1 module: ', module);
// src/entry2.jsconst module = require('./module');const end = () => 'end';end();console.log('entry2 module: ', module);
// src/module.jsconst name = 'cegz';module.exports = { name,};
复制代码
有了打包入口，我们再来创建一个 webpack.config.js 配置文件做一些基础配置：
// ./webpack.config.jsconst path = require('path');const CustomWebpackPlugin = require('./plugins/custom-webpack-plugin.js');
module.exports = { entry: { entry1: path.resolve(__dirname, './src/entry1.js'), entry2: path.resolve(__dirname, './src/entry2.js'), }, context: process.cwd(), output: { path: path.resolve(__dirname, './build'), filename: '[name].js', }, plugins: [new CustomWebpackPlugin()], resolve: { extensions: ['.js', '.ts'], }, module: { rules: [ { test: /\.js/, use: [ path.resolve(__dirname, './loaders/transformArrowFnLoader.js'), // 转换箭头函数 ], }, ], },};
复制代码
以上配置，指定了两个入口文件，以及一个 output.build 输出目录，同时还指定了一个 plugin 和一个 loader。
接下来我们编写 webpack 的核心入口文件，来实现打包逻辑。这里我们创建 webpack 核心实现所需的文件：
// cd webpack-demomkdir lib && cd libtouch webpack.js // webpack 入口文件touch compiler.js // webpack 核心编译器touch compilation.js // webpack 核心编译对象touch utils.js // 工具函数
复制代码
这里我们创建了两个比较相似的文件：compiler 和 compilation，在这里做下简要说明：
对于入口文件 lib/webpack.js，你会看到大致如下结构：
// lib/webpack.jsfunction webpack(options) { ...}
module.exports = webpack;
复制代码
对于执行入口文件的测试用例，代码如下：
// 测试用例 webpack-demo/build.jsconst webpack = require('./lib/webpack');const config = require('./webpack.config');
const compiler = webpack(config);
// 调用run方法进行打包compiler.run((err, stats) => { if (err) { console.log(err, 'err'); } // console.log('构建完成！', stats.toJSON());});
复制代码
接下来，我们从 lib/webpack.js 入口文件，按照以下步骤开始分析打包流程。
1、初始化阶段 - webpack
2、编译阶段 - build
读取入口文件
从入口文件开始进行编译
调用 loader 对源代码进行转换
借助 babel 解析为 AST 收集依赖模块
递归对依赖模块进行编译操作
3、生成阶段 - seal
4、写入阶段 - emit
二、初始化阶段
初始化阶段的逻辑集中在调用 webpack(config) 时候，下面我们来看看 webpack() 函数体内做了哪些事项。
2.1、读取与合并配置信息
通常，在我们的工程的根目录下，会有一个 webpack.config.js 作为 webpack 的配置来源；
除此之外，还有一种是通过 webpak bin cli 命令进行打包时，命令行上携带的参数也会作为 webpack 的配置。
在配置文件中包含了我们要让 webpack 打包处理的入口模块、输出位置、以及各种 loader、plugin 等；
在命令行上也同样可以指定相关的配置，且权重高于配置文件。（下面将模拟 webpack cli 参数合并处理）
所以，我们在 webpack 入口文件这里将先做一件事情：合并配置文件与命令行的配置。
// lib/webpack.jsfunction webpack(options) { // 1、合并配置项 const mergeOptions = _mergeOptions(options); ...}
function _mergeOptions(options) { const shellOptions = process.argv.slice(2).reduce((option, argv) => { // argv -> --mode=production const [key, value] = argv.split('='); if (key && value) { const parseKey = key.slice(2); option[parseKey] = value; } return option; }, {}); return { ...options, ...shellOptions };}
module.exports = webpack;
复制代码
2.2、创建编译器（compiler）对象
好的程序结构离不开一个实例对象，webpack 同样也不甘示弱，其编译运转是由一个叫做 compiler 的实例对象来驱动运转。
在 compiler 实例对象上会记录我们传入的配置参数，以及一些串联插件进行工作的 hooks API。
同时，还提供了 run 方法启动打包构建，emitAssets 对打包产物进行输出磁盘写入。这部分内容后面介绍。参考 webpack 视频讲解：进入学习
// lib/webpack.jsconst Compiler = require('./compiler');
function webpack(options) { // 1、合并配置项 const mergeOptions = _mergeOptions(options); // 2、创建 compiler const compiler = new Compiler(mergeOptions); ... return compiler;}
module.exports = webpack;
复制代码
Compiler 构造函数基础结构如下：
// core/compiler.jsconst fs = require('fs');const path = require('path');const { SyncHook } = require('tapable'); // 串联 compiler 打包流程的订阅与通知钩子const Compilation = require('./compilation'); // 编译构造函数
class Compiler { constructor(options) { this.options = options; this.context = this.options.context || process.cwd().replace(/\\/g, '/'); this.hooks = { // 开始编译时的钩子 run: new SyncHook(), // 模块解析完成，在向磁盘写入输出文件时执行 emit: new SyncHook(), // 在输出文件写入完成后执行 done: new SyncHook(), }; }
run(callback) { ... }
emitAssets(compilation, callback) { ... }}
module.exports = Compiler;
复制代码
当需要进行编译时，调用 compiler.run 方法即可：
compiler.run((err, stats) => { ... });
复制代码
2.3、插件注册
有 compiler 实例对象后，就可以注册配置文件中的一个个插件，在合适的时机来干预打包构建。
插件需要接收 compiler 对象作为参数，以此来对打包过程及产物产生 side effect。
插件的格式可以是函数或对象，如果为对象，需要自定义提供一个 apply 方法。常见的插件结构如下：
class WebpackPlugin { apply(compiler) { ... }}
复制代码
注册插件逻辑如下：
// lib/webpack.jsfunction webpack(options) { // 1、合并配置项 const mergeOptions = _mergeOptions(options); // 2、创建 compiler const compiler = new Compiler(mergeOptions); // 3、注册插件，让插件去影响打包结果 if (Array.isArray(options.plugins)) { for (const plugin of options.plugins) { if (typeof plugin === "function") { plugin.call(compiler, compiler); // 当插件为函数时 } else { plugin.apply(compiler); // 如果插件是一个对象，需要提供 apply 方法。 } } } return compiler;}
复制代码
到这里，webpack 的初始工作已经完成，接下来是调用 compiler.run() 进入编译构建阶段。
三、编译阶段
编译工作的起点是在 compiler.run，它会：
发起构建通知，触发 hooks.run 通知相关插件；
创建 compilation 编译对象；
读取 entry 入口文件；
编译 entry 入口文件；
3.1、创建 compilation 编译对象
模块的打包（build）和 代码生成（seal）都是由 compilation 来实现。
// lib/compiler.jsclass Compiler { ... run(callback) { // 触发 run hook this.hooks.run.call(); // 创建 compilation 编译对象 const compilation = new Compilation(this); ... }}
复制代码
compilation 实例上记录了构建过程中的 entries、module、chunks、assets 等编译信息，同时提供 build 和 seal 方法进行代码构建和代码生成。
// lib/compilation.jsconst fs = require('fs');const path = require('path');const parser = require('@babel/parser');const traverse = require('@babel/traverse').default;const generator = require('@babel/generator').default;const t = require('@babel/types');const { tryExtensions, getSourceCode } = require('./utils');
class Compilation { constructor(compiler) { this.compiler = compiler; this.context = compiler.context; this.options = compiler.options; // 记录当前 module code this.moduleCode = null; // 保存所有依赖模块对象 this.modules = new Set(); // 保存所有入口模块对象 this.entries = new Map(); // 所有的代码块对象 this.chunks = new Set(); // 存放本次产出的文件对象（与 chunks 一一对应） this.assets = {}; } build() {} seal() {}}
复制代码
有了 compilation 对象后，通过执行 compilation.build 开始模块构建。
// lib/compiler.jsclass Compiler { ... run(callback) { // 触发 run hook this.hooks.run.call(); // 创建 compilation 编译对象 const compilation = new Compilation(this); // 编译模块 compilation.build(); }}
复制代码
3.2、读取 entry 入口文件
构建模块首先从 entry 入口模块开始，此时首要工作是根据配置文件拿到入口模块信息。
entry 配置的方式多样化，如：可以不传（有默认值）、可以传入 string，也可以传入对象指定多个入口。
所以读取入口文件需要考虑并兼容这几种灵活配置方式。
// lib/compilation.jsclass Compilation { ... build() { // 1、读取配置入口 const entry = this.getEntry(); ... }
getEntry() { let entry = Object.create(null); const { entry: optionsEntry } = this.options; if (!optionsEntry) { entry['main'] = 'src/index.js'; // 默认找寻 src 目录进行打包 } else if (typeof optionsEntry === 'string') { entry['main'] = optionsEntry; } else { entry = optionsEntry; // 视为对象，比如多入口配置 } // 相对于项目启动根目录计算出相对路径 Object.keys(entry).forEach((key) => { entry[key] = './' + path.posix.relative(this.context, entry[key]); }); return entry; }}
复制代码
3.3、编译 entry 入口文件
拿到入口文件后，依次对每个入口进行构建。
// lib/compilation.jsclass Compilation { ... build() { // 1、读取配置入口 const entry = this.getEntry(); // 2、构建入口模块 Object.keys(entry).forEach((entryName) => { const entryPath = entry[entryName]; const entryData = this.buildModule(entryName, entryPath); this.entries.set(entryName, entryData); }); }}
复制代码
构建阶段执行如下操作：
通过 fs 模块读取 entry 入口文件内容；
调用 loader 来转换（更改）文件内容；
为模块创建 module 对象，通过 AST 解析源代码收集依赖模块，并改写依赖模块的路径；
如果存在依赖模块，递归进行上述三步操作；
读取文件内容：
// lib/compilation.jsclass Compilation { ... buildModule(moduleName, modulePath) { // 1. 读取文件原始代码 const originSourceCode = fs.readFileSync(modulePath, 'utf-8'); this.moduleCode = originSourceCode; ... }}
复制代码
调用 loader 转换源代码：
// lib/compilation.jsclass Compilation { ... buildModule(moduleName, modulePath) { // 1. 读取文件原始代码 const originSourceCode = fs.readFileSync(modulePath, 'utf-8'); this.moduleCode = originSourceCode; // 2. 调用 loader 进行处理 this.runLoaders(modulePath); ... }}
复制代码
loader 本身是一个 JS 函数，接收模块文件的源代码作为参数，经过加工改造后返回新的代码。
// lib/compilation.jsclass Compilation { ... runLoaders(modulePath) { const matchLoaders = []; // 1、找到与模块相匹配的 loader const rules = this.options.module.rules; rules.forEach((loader) => { const testRule = loader.test; if (testRule.test(modulePath)) { // 如：{ test:/\.js$/g, use:['babel-loader'] }, { test:/\.js$/, loader:'babel-loader' } loader.loader ? matchLoaders.push(loader.loader) : matchLoaders.push(...loader.use); } }); // 2. 倒序执行 loader for (let i = matchLoaders.length - 1; i >= 0; i--) { const loaderFn = require(matchLoaders[i]); // 调用 loader 处理源代码 this.moduleCode = loaderFn(this.moduleCode); } }}
复制代码
执行 webpack 模块编译逻辑：
// lib/compilation.jsclass Compilation { ... buildModule(moduleName, modulePath) { // 1. 读取文件原始代码 const originSourceCode = fs.readFileSync(modulePath, 'utf-8'); this.moduleCode = originSourceCode; // 2. 调用 loader 进行处理 this.runLoaders(modulePath); // 3. 调用 webpack 进行模块编译 为模块创建 module 对象 const module = this.handleWebpackCompiler(moduleName, modulePath); return module; // 返回模块 }}
复制代码
创建 module 对象；
对 module code 解析为 AST 语法树；
遍历 AST 去识别 require 模块语法，将模块收集在 module.dependencies 之中，并改写 require 语法为 __webpack_require__；
将修改后的 AST 转换为源代码；
若存在依赖模块，深度递归构建依赖模块。
// lib/compilation.jsclass Compilation { ... handleWebpackCompiler(moduleName, modulePath) { // 1、创建 module const moduleId = './' + path.posix.relative(this.context, modulePath); const module = { id: moduleId, // 将当前模块相对于项目启动根目录计算出相对路径 作为模块ID dependencies: new Set(), // 存储该模块所依赖的子模块 entryPoint: [moduleName], // 该模块所属的入口文件 };
// 2、对模块内容解析为 AST，收集依赖模块，并改写模块导入语法为 __webpack_require__ const ast = parser.parse(this.moduleCode, { sourceType: 'module', });
// 遍历 ast，识别 require 语法 traverse(ast, { CallExpression: (nodePath) => { const node = nodePath.node; if (node.callee.name === 'require') { const requirePath = node.arguments[0].value; // 寻找模块绝对路径 const moduleDirName = path.posix.dirname(modulePath); const absolutePath = tryExtensions( path.posix.join(moduleDirName, requirePath), this.options.resolve.extensions, requirePath, moduleDirName ); // 创建 moduleId const moduleId = './' + path.posix.relative(this.context, absolutePath); // 将 require 变成 __webpack_require__ 语句 node.callee = t.identifier('__webpack_require__'); // 修改模块路径（参考 this.context 的相对路径） node.arguments = [t.stringLiteral(moduleId)];
if (!Array.from(this.modules).find(module => module.id === moduleId)) { // 在模块的依赖集合中记录子依赖 module.dependencies.add(moduleId); } else { // 已经存在模块集合中。虽然不添加进入模块编译 但是仍要在这个模块上记录被依赖的入口模块 this.modules.forEach((module) => { if (module.id === moduleId) { module.entryPoint.push(moduleName); } }); } } }, });
// 3、将 ast 生成新代码 const { code } = generator(ast); module._source = code;
// 4、深度递归构建依赖模块 module.dependencies.forEach((dependency) => { const depModule = this.buildModule(moduleName, dependency); // 将编译后的任何依赖模块对象加入到 modules 对象中去 this.modules.add(depModule); });
return module; }}
复制代码
通常我们 require 一个模块文件时习惯不去指定文件后缀，默认会查找 .js 文件。
这跟我们在配置文件中指定的 resolve.extensions 配置有关，在 tryExtensions 方法中会尝试为每个未填写后缀的 Path 应用 resolve.extensions：
// lib/utils.jsconst fs = require('fs');
function tryExtensions( modulePath, extensions, originModulePath, moduleContext) { // 优先尝试不需要扩展名选项（用户如果已经传入了后缀，那就使用用户填入的，无需再应用 extensions） extensions.unshift(''); for (let extension of extensions) { if (fs.existsSync(modulePath + extension)) { return modulePath + extension; } } // 未匹配对应文件 throw new Error( `No module, Error: Can't resolve ${originModulePath} in ${moduleContext}` );}
module.exports = { tryExtensions, ...}
复制代码
至此，「编译阶段」到此结束，接下来是「生成阶段」 seal。
四、生成阶段
在「编译阶段」会将一个个文件构建成 module 存储在 this.modules 之中。
在「生成阶段」，会根据 entry 创建对应 chunk 并从 this.modules 中查找被 entry 所依赖的 module 集合。
最后，结合 runtime webpack 模块机制运行代码，经过拼接生成最终的 assets 产物。
// lib/compiler.jsclass Compiler { ... run(callback) { // 触发 run hook this.hooks.run.call(); // 创建 compilation 编译对象 const compilation = new Compilation(this); // 编译模块 compilation.build(); // 生成产物 compilation.seal(); ... }}
复制代码
entry + module --> chunk --> assets 过程如下：
// lib/compilation.jsclass Compilation { ... seal() { // 1、根据 entry 创建 chunk this.entries.forEach((entryData, entryName) => { // 根据当前入口文件和模块的相互依赖关系，组装成为一个个包含当前入口所有依赖模块的 chunk this.createChunk(entryName, entryData); }); // 2、根据 chunk 创建 assets this.createAssets(); }
// 根据入口文件和依赖模块组装chunks createChunk(entryName, entryData) { const chunk = { // 每一个入口文件作为一个 chunk name: entryName, // entry build 后的数据信息 entryModule: entryData, // entry 的所依赖模块 modules: Array.from(this.modules).filter((i) => i.entryPoint.includes(entryName) ), }; // add chunk this.chunks.add(chunk); }
createAssets() { const output = this.options.output; // 根据 chunks 生成 assets this.chunks.forEach((chunk) => { const parseFileName = output.filename.replace('[name]', chunk.name); // 为每一个 chunk 文件代码拼接 runtime 运行时语法 this.assets[parseFileName] = getSourceCode(chunk); }); }}
复制代码
getSourceCode 是将 entry 和 modules 组合而成的 chunk，接入到 runtime 代码模板之中。
// lib/utils.jsfunction getSourceCode(chunk) { const { entryModule, modules } = chunk; return ` (() => { var __webpack_modules__ = { ${modules .map((module) => { return ` '${module.id}': (module) => { ${module._source} } `; }) .join(',')} }; var __webpack_module_cache__ = {}; function __webpack_require__(moduleId) { var cachedModule = __webpack_module_cache__[moduleId]; if (cachedModule !== undefined) { return cachedModule.exports; } var module = (__webpack_module_cache__[moduleId] = { exports: {}, }); __webpack_modules__[moduleId](module, module.exports, __webpack_require__); return module.exports; } (() => { ${entryModule._source} })(); })(); `;}
复制代码
到这里，「生成阶段」处理完成，这也意味着 compilation 编译工作的完成，接下来我们回到 compiler 进行最后的「产物输出」。
五、写入阶段
「写入阶段」比较容易理解，assets 上已经拥有了最终打包后的代码内容，最后要做的就是将代码内容写入到本地磁盘之中。
// lib/compiler.jsclass Compiler { ... run(callback) { // 触发 run hook this.hooks.run.call(); // 创建 compilation 编译对象 const compilation = new Compilation(this); // 编译模块 compilation.build(); // 生成产物 compilation.seal(); // 输出产物 this.emitAssets(compilation, callback); }
emitAssets(compilation, callback) { const { entries, modules, chunks, assets } = compilation; const output = this.options.output;
// 调用 Plugin emit 钩子 this.hooks.emit.call();
// 若 output.path 不存在，进行创建 if (!fs.existsSync(output.path)) { fs.mkdirSync(output.path); }
// 将 assets 中的内容写入文件系统中 Object.keys(assets).forEach((fileName) => { const filePath = path.join(output.path, fileName); fs.writeFileSync(filePath, assets[fileName]); });
// 结束之后触发钩子 this.hooks.done.call();
callback(null, { toJSON: () => { return { entries, modules, chunks, assets, }; }, }); }}
复制代码
至此，webpack 的打包流程就以完成。
接下来我们完善配置文件中未实现的 loader 和 plugin，然后调用测试用例，测试一下上面的实现。
六、编写 loader
在 webpack.config.js 中我们为 .js 文件类型配置了一个自定义 loader 来转换文件内容：
// webpack.config.jsmodule: { rules: [ { test: /\.js/, use: [ path.resolve(__dirname, './loaders/transformArrowFnLoader.js'), ], }, ],},
复制代码
loader 本身是一个函数，接收文件模块内容作为参数，经过改造处理返回新的文件内容。
下面我们在 loaders/transformArrowFnLoader.js 中，对文件中使用到的箭头函数，转换为普通函数，来理解 webpack loader 的作用。
// loaders/transformArrowFnLoader.jsconst parser = require('@babel/parser');const traverse = require('@babel/traverse').default;const generator = require('@babel/generator').default;const t = require('@babel/types');
function transformArrowLoader(sourceCode) { const ast = parser.parse(sourceCode, { sourceType: 'module' }); traverse(ast, { ArrowFunctionExpression(path, state) { const node = path.node; const body = path.get('body'); const bodyNode = body.node; if (bodyNode.type !== 'BlockStatement') { const statements = []; statements.push(t.returnStatement(bodyNode)); node.body = t.blockStatement(statements); } node.type = "FunctionExpression"; } }); const { code } = generator(ast);
return code;}
module.exports = transformArrowLoader;
复制代码
最终，箭头函数经过处理后变成如下结构：
const start = () => 'start'; || ||const start = function () { return 'start';};
复制代码
七、编写插件
从上面介绍我们了解到，每个插件都需要提供一个 apply 方法，此方法接收 compiler 作为参数。
通过 compiler 可以去订阅 webpack 工作期间不同阶段的 hooks，以此来影响打包结果或者做一些定制操作。
下面我们编写自定义插件，绑定两个不同时机的 compiler.hooks 来扩展 webpack 打包功能：
// plugins/custom-webpack-pluginsconst fs = require('fs-extra');const path = require('path');
class CustomWebpackPlugin { apply(compiler) { const outputPath = compiler.options.output.path; const hooks = compiler.hooks;
// 清除 build 目录 hooks.emit.tap('custom-webpack-plugin', (compilation) => { fs.removeSync(outputPath); });
// copy 静态资源 const otherFilesPath = path.resolve(__dirname, '../src/otherfiles'); hooks.done.tap('custom-webpack-plugin', (compilation) => { fs.copySync(otherFilesPath, path.resolve(outputPath, 'otherfiles')); }); }}
module.exports = CustomWebpackPlugin;
复制代码
现在，我们通过 node build.js 运行文件，最终会在 webpack-demo 下生成 build 目录以及入口打包资源。
文末
相信读完本篇文章，你对 webpack 的打包思路有了清晰的认识。
评论