打包代码，必备技能：从零构建 mini webpack

前端

2023-10-03 04:17:05

从零开始构建一个简化版的webpack，可以让我们深入理解webpack的工作原理和实现细节。它将帮助我们解决一些常见的打包问题，如包缓存和循环依赖，同时为我们提供一个定制和扩展webpack的工具。

认识mini webpack

webpack是一个模块化打包工具，它可以将多个模块打包成一个或多个文件。webpack最核心的功能是将每个模块的依赖项解析出来，然后根据这些依赖项来构建一个依赖图。

在webpack的构建过程中，首先会读取并解析主入口文件，也就是我们常说的index.js文件。接着，webpack会解析出index.js文件中所有依赖的模块，并重复上述步骤解析这些模块的依赖项。

webpack会把这些模块及其依赖项组织成一个依赖图，然后根据这个依赖图生成一个打包好的文件。打包好的文件可以是单个文件，也可以是多个文件，这取决于webpack的配置。

实现简化版webpack

首先，我们创建一个名为mini-webpack的项目。然后，在项目中创建一个package.json文件，并添加以下内容：

{
  "name": "mini-webpack",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  }
}

接下来，我们创建一个index.js文件，并添加以下内容：

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

function bundle(entry) {
  const modules = [];
  const graph = {};
  const usedModules = {};

  function buildModule(modulePath) {
    if (usedModules[modulePath]) {
      return graph[modulePath];
    }

    usedModules[modulePath] = true;

    const module = {
      path: modulePath,
      code: fs.readFileSync(modulePath, 'utf8')
    };

    const dependencies = [];
    module.code.match(/require\(['"](.+?)['"]\)/g).forEach(match => {
      dependencies.push(match.slice(8, -2));
    });

    module.dependencies = dependencies;

    for (const dependency of dependencies) {
      buildModule(path.resolve(path.dirname(modulePath), dependency));
    }

    graph[modulePath] = module;
    modules.push(module);
  }

  buildModule(entry);

  let bundleCode = '';
  for (const module of modules) {
    bundleCode += `(function (module, exports, require) {\n${module.code}\n})(module.exports, module.exports, require);`;
  }

  fs.writeFileSync('bundle.js', bundleCode);
}

bundle('./src/index.js');