当前位置：首页 > news >正文

网站后台系统的易用性网站制作合同范本

news 2025/9/30 17:45:43

网站后台系统的易用性,网站制作合同范本,蓝色机械营销型网站,企业微信下载官方网站【Wbpack原理】基础流程解析，实现 mini-webpack ⛄：webpack 对前端同学来说并不陌生，它是我们学习前端工程化的第一站，在最开始的 vue-cli 中我们就可以发现它的身影。我们的 vue/react 项目是如何打包成 js 文件并在浏览器中运行…

【Wbpack原理】基础流程解析，实现 mini-webpack

⛄：webpack 对前端同学来说并不陌生，它是我们学习前端工程化的第一站，在最开始的 vue-cli 中我们就可以发现它的身影。我们的 vue/react 项目是如何打包成 js 文件并在浏览器中运行的呢？本系列文章将会帮助你由浅入深理解 webpack 原理，了解其中的 loader/plugin 机制，熟悉 webpack 打包流程。实现简易 webpack 核心代码，run-loader 模块，示例 loader 与 plugin。Tip：在阅读本文前需要了解一些 webpack 的基础概念及常用配置。

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

本系列全部代码与文章会在 LonelySnowman/mini-webpack 同步，如果能帮到你的话请帮我点个 star 吧 😀。

基础流程解析

webpack 打包流程可大致分为以下四部分。

初始化准备：
- webpack 会读取 webpack.config.js 文件中的参数，并将 shell 命令中的参数合并形成最终参数。
- 然后 webpack 根据最终参数初始化 compiler 对象，注册配置中的插件，执行 compiler.run() 开始编译。
模块编译：
- 从打包入口开始，调用匹配文件的 loader 对文件进行处理，并分析模块间的依赖关系，递归对模块进行编译。
模块生成：
- 模块递归编译结束后，得到模块之间的相互依赖关系。
输出文件：
- 根据模块间的依赖关系及配置文件，将处理后的模块输出到 output 的目录下。

compiler 对象记录着构建过程中 webpack 环境与配置信息，整个 webpack 从开始到结束的生命周期。

目录结构

首先搭建一下我们项目结构的基础目录，讲解过程中会给出具体代码，使用 pnpm-workspace 构建一个 monorepo 仓库，除 mini-webpack 代码外，后续还会带大家实现其他 webpack 相关知识模块。

也可以直接去 LonelySnowman/mini-webpack 克隆本系列相关代码。

packages
├─core // mini-webpack 核心代码
│  │  compilation.js // compilation 对象实现
│  │  compiler.js // compiler 对象实现
│  │  index.js // 编译执行主文件
│  │  webpack.js // webpack 初始化相关代码
│  └─util
│    index.js // 工具函数
├─example // 被编译的案例代码
│  │ webpack.config.js
│  └─src
│    entry1.js
│    entry2.js
│    module.js
├─loaders // 简易 loader demo
│ loader-1.js
│ loader-2.js
└─plugins // 简易 plugin demoplugin-1.jsplugin-2.jsplugin-test.js

# pnpm-workspace.yaml
packages:- 'packages/*'

新建打包案例

在开始编写 mini-webpack 核心代码前，我们先编写一个用于我们编写完成后的测试用例。

新建一个 webpack 配置文件。

// packages/example/webpack.config.js
const path = require('path')
const Plugin1 = require('../plugins/plugin-1')
const Plugin2 = require('../plugins/plugin-2')module.exports = {mode: 'development',entry: {main: path.resolve(__dirname, './src/entry1.js'),second: path.resolve(__dirname, './src/entry2.js'),},devtool: false,context: process.cwd(),output: {path: path.resolve(__dirname, './build'),filename: '[name].js',},plugins: [new Plugin1(), new Plugin2()],resolve: {extensions: ['.js', '.ts'],},module: {rules: [{test: /\.js/,use: [path.resolve(__dirname, '../loaders/loader-1.js'),path.resolve(__dirname, '../loaders/loader-2.js'),],},],},
};

新建一下我们需要打包用的文件。

// packages/example/src/entry1.js
const depModule = require('./module');
console.log(depModule, 'Entry 1 dep');
console.log('This is entry 1 !');// packages/example/src/entry2.js
const depModule = require('./module');
console.log(depModule, 'Entry 2 dep');
console.log('This is entry 2 !');// packages/example/src/module.js
const name = 'This is module';
module.exports = {name,
};

新建我们用到的 plugin 与 loader，如果你对这两个的实现原理都不太了解也不要担心，后续我们会详细讲解，这里只编写了一些简单的小案例。

// packages/plugins/plugin-1.js
class Plugin1 {apply(compiler) {compiler.hooks.run.tap('Plugin1', () => {console.log('Plugin1 Start');});}
}module.exports = Plugin1;// packages/plugins/plugin-2.js
class Plugin2 {apply(compiler) {compiler.hooks.done.tap('Plugin2', () => {console.log('Plugin2 Done');});}
}module.exports = Plugin2;

// packages/loaders/loader-1.js
function loader(source) {console.log('loader1: normal', source);return source + '\n// loader1';
}loader.pitch = function () {console.log('loader1 pitch');
};module.exports = loader;// packages/loaders/loader-2.js
function loader(source) {console.log('loader2: normal', source);return source + '\n// loader2';
}loader.pitch = function () {console.log('loader2 pitch');
};module.exports = loader;

初始化准备阶段

`webpack cli` 运行入口

打包打包时 webpack 会读取 webpack.config.js 的配置并与 shell 中的参数合并，生成 compiler 对象并调用 compiler.run() 方法进行打包。

我们新建 index.js 作为 webpack 运行的入口。

// packages/core/index.js
// 调用 webpack(config) 初始化 compiler 对象
const webpack = require('./webpack');
const config = require('../example/webpack.config');// webpack() 方法会返回一个 compiler 对象
const compiler = webpack(config);// 调用 run 方法进行打包
compiler.run((err, stats) => {if (err) {console.log(err, 'err');}
});

新建 webpack.js 去读取参数并返回 compiler 对象。

// packages/core/webpack.js
const Compiler = require('./compiler')function webpack(options) {// 初始化参数根据配置文件和 shell 参数得到合并后的参数const mergedOptions = mergeOptions(options);// 创建compiler对象const compiler = new Compiler(mergedOptions)return compiler
}module.exports = webpack;

补充 mergeOptions 方法。

在运行 webpack 命令时我们可以使用 --mode=production 去覆盖 webpack.config.js 的参数

// packages/core/webpack.js
// webpack --mode=production
function mergeOptions(options) {const shellOptions = process.argv.slice(2).reduce((option, argv) => {// 根据 = 分割const [key, value] = argv.split('=')if (key && value) {// 去除 key 前面的 --const parseKey = key.slice(2)option[parseKey] = value}return option;}, {})// 用 shellOptions 覆盖配置文件的 optionsreturn { ...options, ...shellOptions }
}

实现 compiler 对象

新建 compiler.js 文件，实现 compiler 对象核心逻辑。

compiler 对象记录着构建过程中 webpack 环境与配置信息，整个 webpack 从开始到结束的生命周期。我们需要实现 plugin 插件机制与 loader 机制。下面是 compiler 对象的基础骨架。

// packages/core/compiler.js
class Compiler {constructor(options) {this.options = options;}// 实现 run 方法开始编译run(callback) {}
}module.exports = Compiler

实现基础插件钩子

插件是 webpack 生态的关键部分，它为我们提供了一种强有力的方式来直接触及 webpack 的编译过程(compilation process)。插件能够 hook 到每一个编译(compilation)中发出的关键事件中。在编译的每个阶段中，插件都拥有对 compiler 对象的完全访问能力，并且在合适的时机，还可以访问当前的 compilation 对象。

compilation 对象记录编译模块的信息，只要项目文件有改动，compilation 就会被重新创建。

webpack 插件可以简单理解为可以在 wepack 整个生命周期中触发的钩子，类似与 vue 中的 created，mounted 等生命周期。

这里简单讲解一下，后续有单独的章节详细讲解 plugin

我们实现一个简易的 webpack 插件，packages/plugins/plugin-test.js，插件就是一个 javascript 类，需要实现 apply 方法供 webpack 调用，webpack 会在 compiler 及 compilation 对象上预设一系列钩子供我们调用。

// 这个插件的作用就是在 webpack 开始编译前输出 PluginTest Start
class PluginTest {// webpack 会调用 apply 函数并传入 compiler 对象apply(compiler) {// 在 compiler 对象上的 run hooks 下注册同步钩子compiler.hooks.run.tap('Plugin Test', () => {console.log('PluginTest Start');});}
}module.exports = PluginTest;

接下来我们在 compiler 实现一些基本的钩子，webpack 的插件借助 tapable 这个库去实现，我们可以使用 new SyncHook() 去初始化一个钩子对象，放在 compiler.hooks 下。

const { SyncHook } = require('tapable')class Compiler {constructor(options) {// ...// 创建 plugin hooksthis.hooks = {// 开始编译时的钩子run: new SyncHook(), // new AsyncSeriesHook(["compiler"])// 输出 asset 到 output 目录之前执行的钩子emit: new SyncHook(), // new AsyncSeriesHook(["compilation"])// 在 compilation 全部完成编译执行的钩子done: new SyncHook(), // new AsyncSeriesHook(["stats"])compilation: new SyncHook(["compilation", "params"]),};}run(callback) {// 调用 run 方法时触发 hooks.run 的钩子回调this.hooks.run.call()}
}

在初始化 compiler 对象时我们还需要去执行插件实例中的 apply 方法，用于注册插件中的钩子。

添加 loadPlugin 方法后的完整 webpack.js 如下。

// packages/core/webpack.js
const Compiler = require('./compiler')function webpack(options) {// 合并参数 得到合并后的参数 mergedOptionsconst mergedOptions = mergeOptions(options);// 创建compiler对象const compiler = new Compiler(mergedOptions)// 加载插件loadPlugin(options.plugins, compiler);return compiler
}// 合并参数
function mergeOptions(options) {const shellOptions = process.argv.slice(2).reduce((option, argv) => {// 根据 = 分割const [key, value] = argv.split('=')if (key && value) {// 去除 key 前面的 --const parseKey = key.slice(2)option[parseKey] = value}return option;}, {})return { ...options, ...shellOptions }
}// 加载插件函数
function loadPlugin(plugins, compiler) {if (plugins && Array.isArray(plugins)) {plugins.forEach((plugin) => {// webpack 插件都是一个类 需要有 apply 方法plugin.apply(compiler);});}
}module.exports = webpack;

webpack 插件本质上就是通过发布订阅者模式，在 compiler.hooks 上监听事件，通过 compiler.hooks.xxx.tap 去订阅事件，用 compiler.hooks.xxx.call 去触发事件，触发方法在后续会逐步添加。

至此已实现了初始化准备阶段的内容，我们实现了 webpack 配置的读取及初始化合并，注册 webpack 插件并调用 compiler.run() 方法开始编译。

模块编译阶段

寻找编译入口 `entry`

打包前我们需要根据合并后的配置找到打包入口文件，对 entry 文件进行编译处理。入口配置可以为字符串也可以为对象。

// 字符串配置形式
{entry: 'entry.js'
}
// 字符串形式最终也会被转为对象配置
{entry: {main: 'entry.js'}
}// 对象配置形式
{entry: {'entry1': './entry1.js','entry2': './entry2.js'}
}

我们在 compiler.js 中实现 getEntry 寻找打包入口的方法。

// packages/core/compiler.js
const path = require('path')
const { toUnixPath } = require('./util')class Compiler {constructor(options) {// 读取配置中的 根目录 路径默认值为 process.cwd()this.rootPath = this.options.context || toUnixPath(process.cwd())// ...}// run方法启动编译// 同时run方法接受外部传递的callbackrun(callback) {// ...const entry = this.getEntry();// ...}// 获取入口文件路径getEntry() {let entry = Object.create(null)const { entry: optionsEntry } = this.options// string 转为含 main 的对象 (支持 webpack entry 配置传入字符串的情况)if (typeof optionsEntry === 'string') entry['main'] = optionsEntryelse entry = optionsEntry// 将 entry 变成绝对路径Object.keys(entry).forEach((key) => {const value = entry[key]if (!path.isAbsolute(value)) {// 转化为绝对路径的同时统一路径分隔符为 /entry[key] = toUnixPath(path.join(this.rootPath, value))}})return entry}
}module.exports = Compiler

补充一下用到的工具函数。

// packages/core/util/index.js// 统一路径分隔符为 /
function toUnixPath(path) {return path.replace(/\\/g, '/');
}module.exports = {toUnixPath
}

这一步我们通过读取 webpack 配置中的 entry 获取打包入口文件转化为绝对路径并统一路径分分隔符。

从入口文件开始编译

🤔 编译阶段我们需要完成以下内容：

根据入口文件构建 compilation 对象，compilation 对象会负责模块编译过程的处理。
根据入口文件路径分析入口文件，使用 loader 处理匹配的文件。
将 loader 处理完成的入口文件进行编译。
分析入口文件依赖，重复上边两个步骤编译对应依赖。
如果嵌套文件存在依赖文件，递归调用依赖模块进行编译。
递归编译完成后，组装一个个包含多个模块的chunk。

新建 Compilation 类进行编译模块的处理，保存该次编译过程中的入口模块对象、依赖模块对象、

// packages/core/compilation.jsclass Compilation {constructor(compiler, params) {// 获取 compiler 上的 optionsthis.options = compiler.options;this.rootPath = compiler.rootPath;// 保存所有入口模块对象this.entries = new Set();// 保存所有依赖模块对象this.modules = new Set();// 所有的代码块对象this.chunks = new Set();// 存放本次产出的文件对象this.assets = new Set();// 存放本次编译所有产出的文件名this.files = [];}
}

根据配置中的入口文件，开始从入口文件开始进行编译，并创建入口文件对象。

// packages/core/compilation.jsclass Compilation {// ...// A.编译全部入口模块buildEntryModule(entry) {Object.entries(entry).forEach(([entryName, entryPath]) => {// 对入口文件进行编译 获取入口文件对象const entryObj = this.buildModule(entryName, entryPath);this.entries.add(entryObj);// 根据当前入口文件和模块的相互依赖关系，组装成为一个个包含当前入口所有依赖模块的chunkthis.buildUpChunk(entryName, entryObj);});}
}

模块编译

在编写模块编译的方法前，我们可以先使用原版的 webpack 对我们的案例进行打包，看一下打包后的结果。

// packages/core/index.js// 使用 webpack 替换我们的 mini-webpack
// const webpack = require('./webpack');
const webpack = require('webpack');
const config = require('../example/webpack.config');
const compiler = webpack(config);
compiler.run((err, stats) => {if (err) {console.log(err, 'err');}
});

然后在根目录执行 node .\packages\core\index.js 进行打包。

我们可以看到依据我们的 entry 打包出了两个文件，分别来自 entry1 与 entry2 ，我们可以看一下 packages/example/build/main.js 文件。下面的代码是剔除了注释后的。

(() => {// entry 中引入的模块被存入了一个 __webpack_modules__ 对象// key 为模块的相对路径// value 为一个函数直接执行 module 中的代码var __webpack_modules__ = ({"./packages/example/src/module.js":((module) => {const name = 'This is module';module.exports = {name,};})});var __webpack_module_cache__ = {};// 自行封装一个 __webpack_require__ 方法执行 module 中的代码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;}var __webpack_exports__ = {};(() => {// 代码中的 require 均被替换为 __webpack_require__const depModule = __webpack_require__( "./packages/example/src/module.js");console.log(depModule, 'Entry 1 dep');console.log('This is entry 1 !');// loader2// loader1})();
})();

🤔 这样一看原理其实很简单，webpack 最终打包出的文件是一个立即执行函数，依次读取 entry 中引用的文件全部编译在 __webpack_modules__ 中的一个对象，key 为模块的相对路径(作为一个模块的唯一 id)，value 为一个函数直接执行 module 中的代码。然后再封装一个 __webpack_require__ 方法从 __webpack_modules__ 获取 module 代码并执行。并将代码中的 require 全部替换为 __webpack_require__。

那么再编译模块的方法主要进行两步操作，获取代码文件的源代码字符串，然后使用 loader 对代码进行处理，再对处理后的代码进行编译，就是将代码中的 require 全部替换为 __webpack_require__，最后我们输出模块的时候再将 module 中的代码打包进 __webpack_modules__ 就可以了。

// packages/core/compilation.js
buildModule(moduleName, modulePath) {// 1.读取文件原始代码const originSourceCode = fs.readFileSync(modulePath, 'utf-8')// originSourceCode 与 moduleCode// 记录当前处理模块的 源代码 与 编译后代码this.originSourceCode = originSourceCodethis.moduleCode = originSourceCode;// 2.调用 loader 进行处理// 这里先用一个简单的方法进行处理// 源码中封装了一个 loader-runner 模块进行处理this.handleLoader(modulePath);// 3.调用 webpack 进行模块编译获得最终的module对象// 处理 require 引用问题const module = this.handleWebpackCompiler(moduleName, modulePath);return module
}

首先我们需要用 loader 处理读取的源文件内容。loader 本质上就是一个函数，接收文件源代码并可以在 this 中调用 webpack 上下文对象，返回 loader 处理后的代码内容。

// packages/core/compilation.js
handleLoader(modulePath) {const matchLoaders = [];// 1. 获取所有传入的loader规则const rules = this.options.module.rules;// 读取 loader 路径rules.forEach((loader) => {const testRule = loader.test;if (testRule.test(modulePath)) {if (typeof loader.use === 'string') {matchLoaders.push(loader.use);} else {matchLoaders.push(...loader.use);}}// 2. 倒序执行loader传入源代码for (let i = matchLoaders.length - 1; i >= 0; i--) {// require 引入对应 loaderconst loaderFn = require(matchLoaders[i]);// 使用 call 绑定 thisthis.moduleCode = loaderFn.call(this, this.moduleCode);}});
}

🤔 loader 处理完毕后我们需要进行 webpack 编译阶段，也就是需要将源代码中的 require 全部替换为 __webpack_require__，并生成 module 对象。这个操作可以利用 bable 将代码转化为 ast 语法树，并直接操作语法树生成新的代码，非常方便。

并且在处理过程中我们要进行递归操作，一个模块依赖其他模块时，也需要对该模块的依赖模块进行编译处理。

// 引入相关工具库
const parser = require('@babel/parser');
const traverse = require('@babel/traverse').default;
const generator = require('@babel/generator').default;
const t = require('@babel/types');// packages/core/compilation.js
handleWebpackCompiler(moduleName, modulePath) {// 将当前模块相对于项目启动根目录计算出相对路径 作为模块IDconst moduleId = toUnixPath('./' + path.relative(this.rootPath, modulePath));// 创建模块对象const module = {id: moduleId,dependencies: new Set(), // 该模块所依赖模块绝对路径地址name: [moduleName], // 该模块所属的入口文件source: this.originSourceCode // 当前模块代码};// 调用 babel 分析我们的代码const ast = parser.parse(this.moduleCode, {sourceType: 'module',});// 利用 traverse 方法遍历语法树traverse(ast, {// 当遇到 require 语句时会触发该回调CallExpression:(nodePath) => {const node = nodePath.node;if (node.callee.name === 'require') {// 获得源代码中引入模块相对路径const requirePath = node.arguments[0].value;// 获取到 require 内部的绝对路径// tryExtensions 就是对路径进行后缀的匹配const moduleDirName = path.dirname(modulePath);const absolutePath = tryExtensions(path.join(moduleDirName, requirePath),this.options.resolve.extensions,requirePath,moduleDirName);// 绝对路径转化为相对 rootPath 的相对路径作为 moduleIdconst moduleId = toUnixPath('./' + path.relative(this.rootPath, absolutePath));// 将 require 替换为 __webpack_require__node.callee = t.identifier('__webpack_require__');// 修改源代码中 require 语句引入的模块// 全部修改变为相对于跟路径 moduleId 来处理node.arguments = [t.stringLiteral(moduleId)];// 将该模块 require 的模块全部添加进依赖中module.dependencies.add(moduleId);}},});// 遍历结束根据AST生成新的代码const { code } = generator(ast);// 为当前模块挂载新的生成的代码module._source = code;// 递归依赖深度遍历 存在依赖模块则加入// 添加前防止重复解析const alreadyModules = Array.from(this.modules).map((i) => i.id);module.dependencies.forEach((dependencyPath) => {if (!alreadyModules.includes(dependencyPath)) {const depModule = this.buildModule(moduleName, dependencyPath);// 将编译后的任何依赖模块对象加入到modules对象中去this.modules.add(depModule);} else {// 否则不需要解析 仅添加入口文件this.modules.forEach((value) => {if (value.id === dependencyPath) {value.name.push(moduleName);}})}});// 返回当前模块对象return module
}

补充一下匹配文件后缀的方法。

// packages/core/util/index.js
function tryExtensions(modulePath,extensions,originModulePath,moduleContext
) {// 用户传入后缀优先直接寻找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}`);
}

😀 到这里我们就完成了模块编译阶段，我们从打包入口开始，依次对入口文件以及引用的依赖模块进行 loader 处理以及 webpack 编译，构建出一个 依赖图(dependency graph)，使用 entries 与 modules 分别保存了入口对象和模块对象，我们可以根据这些信息去构建我们的 chunks，最后将打包后的模块输出。

模块生成阶段

组装 chunk

🤔 这一阶段比较简单，一个 entry 生成一个 chunk 根据相关 modules 生成对象即可。

// packages/core/compilation.js
buildUpChunk(entryName, entryObj) {const chunk = {name: entryName, // 每一个入口文件作为一个 chunkentryModule: entryObj, // 编译后的 entry 对象modules: Array.from(this.modules).filter((i) =>i.name.includes(entryName)), // 在该 entry 中引入的 module};// 将 chunk 添加到 this.chunks 中去this.chunks.add(chunk);
}

接下来补充一下在 compiler 对象中调用 compilation 进行编译的代码。

run(callback) {// ...// 获取入口配置对象const entry = this.getEntry();const compilation = this.newCompilation();// 编译入口文件compilation.buildEntryModule(entry);// ...
}

补充一下构建 compilation 对象的方法。

newCompilation(params) {// 源码这里还会传入 normalModuleFactory 等对象const compilation = new Compilation(this, {})// 调用 compilation 阶段触发的钩子this.hooks.compilation.call(compilation, params);return compilation;
}

输出文件阶段

最后我们需要根据我们生成的 chunks 去输出最终编译完成的文件即可，在模块编译阶段中已经讲解了 webpack 打包的原理，是在内部封装了一个 __webpack_require__ 方法去调用 __webpack_modules__ 中的方法，需要变更的地方只有 __webpack_modules__ 对象和处理后的源代码内容，这些在 entrys、modules 和 chunks 中我们都已经生成好了，其他地方直接使用原版 webpack 打包后的内容即可，这样我们就能生成我们的 assets 并输出文件。

编写一个根据 chunk 信息去生成最终代码的方法。

// packages/core/util/index.js
function getSourceCode(chunk) {const { name, entryModule, modules } = chunk;// 根据 moduleId 作为 key// 处理后的代码封装成一个方法作为 valuereturn `(() => {var __webpack_modules__ = {${modules.map((module) => {return `'${module.id}': (module) => {${module._source}}`;}).join(',')}};// The module cachevar __webpack_module_cache__ = {};// The require functionfunction __webpack_require__(moduleId) {// Check if module is in cachevar cachedModule = __webpack_module_cache__[moduleId];if (cachedModule !== undefined) {return cachedModule.exports;}// Create a new module (and put it into the cache)var module = (__webpack_module_cache__[moduleId] = {// no module.id needed// no module.loaded neededexports: {},});// Execute the module function__webpack_modules__[moduleId](module, module.exports, __webpack_require__);// Return the exports of the modulereturn module.exports;}var __webpack_exports__ = {};// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.(() => {${entryModule._source}})();})();`;
}

最后我们根据 chunks 中的信息直接输出文件即可。

// packages/core/compilation.jsemitAssets(compilation) {const output = this.options.output;// 根据 chunks 生成 assets 内容compilation.chunks.forEach((chunk) => {const parseFileName = output.filename.replace('[name]', chunk.name);compilation.assets[parseFileName] = getSourceCode(chunk);});// 调用 Plugin emit 钩子this.hooks.emit.call();// 目录不存在需要先创建目录if (!fs.existsSync(output.path)) fs.mkdirSync(output.path);// files 中保存所有的生成文件名compilation.files = Object.keys(this.assets);// 将 assets 中的内容生成打包文件输出compilation.files.forEach((fileName) => {const filePath = path.join(output.path, fileName);fs.writeFileSync(filePath, this.assets[fileName]);});
}

还需要在 compiler.run 函数中调用一下并补充回调逻辑，触发钩子等。

run(callback) {// ...// 导出列表之后将每个 chunk 转化称为单独的文件// 加入到输出列表 assets 中this.emitAssets(compilation);// 结束之后触发钩子this.hooks.done.call();// 执行 compiler.run 结束后的回调并返回编译信息callback(null, {toJson: () => {return {entries: compilation.entries,modules: compilation.modules,files: compilation.files,chunks: compilation.chunks,assets: compilation.assets,};},});
}

到这里我们简易 webpack 的核心逻辑就全部实现了 😀，我们可以在项目根目录下执行 node .\packages\core\index.js 下我们的编译命令。发现 packages/example/build 目录下生成了 main.js 与 second.js 两个文件，分别对应两个入口打包出的 chunk。

结语

想写在自己实操一遍后你已经对 webpack 有了更深刻的理解，之后我们还会深挖 loader 机制去实现 loader-runner，理解 plugin 机制并实现简易的 tapable，并实现简易的 loader 与 pluin ，最终能通过 index.html 运行我们的 web 项目。

参考文章：

Webpack - 19组清风的专栏 - 掘金 (juejin.cn)

Github地址：

LonelySnowman/mini-webpack