一：webpack概念# 概念

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

二：先从babel讲起。

2.1：babel的原理

 2.1.1.parse:把代码code变成ast（一个树形结构的对象）
 2.1.2.traverse:遍历ast进行修改
 2.1.3.generate:把ast变成代码code2
 

2.2.例子: 将let转为var:源码地址:github.com/18583468779…

import { parse } from "@babel/parser";
import traverse from "@babel/traverse";
import generate from "@babel/generator";

const code = `let a = 'let' ; let b = 123123`;
//将code转换为ast
const ast = parse(code, { sourceType: "module" });
// console.log(ast);
//遍历ast,enter表示每进入一个节点就获取一个信息
traverse(ast, {
  enter: (item) => {
    if (item.node.type == "VariableDeclaration") {
      if (item.node.kind === "let") {
        item.node.kind = "var";
      }
    }
  },
});
//将ast转换为code
const result = generate(ast, {}, code);

console.log(result.code);

2.3.为什么要使用ast

因为很难使用正则表达式来进行替换，ast可以明确告诉你每个let的意思