webpack手写打包多文件

• 与打包单文件相比的不同点：

• 在传入的对象中多了依赖模块的路径和内容，如

  "./src/a.js": // key
  (function (module, exports, __webpack_require__) { // value
      module.exports = "lnj";
  }),

• 主模块函数需要接收自定义require方法，如const name = __webpack_require__("./src/a.js");

• 需要在依赖模块的路径的前面加上主模块路径，如 ./src/a.js、./src/b/b.js

  ({
      "./src/index.js": // key
          (function (module, exports, __webpack_require__) { // value
              const name = __webpack_require__("./src/a.js");
              const age = __webpack_require__("./src/b/b.js");
              console.log("it666");
              console.log(name, age);
          }),
  
      "./src/a.js": // key
          (function (module, exports, __webpack_require__) { // value
              module.exports = "lnj";
          }),
  
      "./src/b/b.js": // key
          (function (module, exports, __webpack_require__) { // value
              module.exports = "33";
          }),
  });

• 创建一个parseModule新方法，主要用来修改主模块代码和保存所有依赖的模块：

  • 因为其中用到了抽象语法树，所以需要安装模块并引入

    // 抽象语法树
    const parser = require("@babel/parser");
    // 遍历抽象语法树
    const traverse = require("@babel/traverse").default;
    // 抽象语法树转化为代码
    const generate = require('@babel/generator').default;
    // 创建抽象语法树
    const t = require('@babel/types');

  // 修改模块代码
  parseModule(code) {
      // 转换成抽象语法树
      let ast = parser.parse(code);
      // 定义变量保存主模块路径
      let rootPath = path.dirname(this.config.entry);
      // 定义数组保存依赖的模块
      let dependencies = [];
      // 遍历抽象语法树
      traverse(ast, {
          // 只有遍历到对应的CallExpression类型才会调用
          CallExpression(nodePath) {
              // 获取当前节点
              let node = nodePath.node;
              if (node.callee.name === "require") {
                  // 修改require为__webpack_require__
                  node.callee.name = "__webpack_require__";
                  // 获取当前require导入的路径
                  let modulePath = node.arguments[0].value;
                  // 修改require导入的路径
                  modulePath = ".\\" + path.join(rootPath, modulePath);
                  modulePath = modulePath.replace(/\\/g, "/");
                  dependencies.push(modulePath);
                  // t.StringLiteral()创建抽象语法树结点,将结点对象放在arguments数组中
                  node.arguments = [t.StringLiteral(modulePath)];
              }
          }
      });
      // 将抽象语法树转为代码
      let resCode = generate(ast).code;
      // 返回修改后的代码和依赖的模块
      return {
          resCode,
          dependencies
      };
  }

• 重写buildModule方法：使其能处理依赖模块

  // 构建模块
  buildModule(modulePath) {
      // 传入入口文件，获取文件中的内容
      let code = this.getSource(modulePath);
      // 修改模块代码(多文件打包)
      let {
          resCode,
          dependencies
      } = this.parseModule(code);
      // 路径作为key，内容作为value保存到modules中
      this.modules[modulePath] = resCode;
      // 将dependencies数组中依赖的模块也保存到modules中
      dependencies.forEach((depath) => { // 不用箭头函数的话，this会被修改指向
          // 构建依赖模块
          this.buildModule(depath);
      })
  }

• 修改main.ejs模板：使其能处理所有modules中保存的模块

  <% for (let key in modules) {%>
      "<%-key%>": (function (module, exports,__webpack_require__) {
          <%-modules[key]%>
      }),
  <% } %>