用 81 行代码轻松编写你的 mini-webpack

2023-11-19 17:55:17

手写 mini-webpack（仅用 81 行代码）

想象一下，你正在面试一个前端工程大厂，面试官问你，"你能自己写一个 Webpack 吗？"你自信地回答："当然可以，给我 81 行代码就可以了。"

听起来是不是很酷？今天，我们就来揭秘如何使用 81 行代码打造属于你自己的 mini-webpack。

准备工作：

3 个 JS 文件：
- index.js -> 依赖 subtraction.js
- subtraction.js -> 依赖 sum.js

正文：

让我们从一个简单而常见的场景开始，我们有三个 JavaScript 文件：index.js、subtraction.js 和 sum.js。index.js 依赖于 subtraction.js，而 subtraction.js 依赖于 sum.js。我们的目标是将这些文件打包成一个可以被浏览器读取和执行的文件。

为了实现这一目标，我们需要创建一个脚手架文件，它将包含我们的打包逻辑。这个脚手架文件可以命名为 "bundle.js"。在 bundle.js 中，我们将使用以下 81 行代码：

const fs = require("fs");
const path = require("path");

const files = ["index.js", "subtraction.js", "sum.js"];
const outputFile = "bundle.js";
const outputPath = path.resolve(__dirname, outputFile);

let code = "";
for (let file of files) {
  code += fs.readFileSync(path.resolve(__dirname, file), "utf-8");
  code += "\n";
}

fs.writeFileSync(outputPath, code);

console.log(`Bundled code saved to ${outputPath}`);