Webpack打包器如何解析命名导入？Webpack 2.x是否打包未引用导出？

1. Webpack 2.x会把A、B和getTax都打包吗？ #

不会——默认情况下，Webpack 2.x只会将你实际导入的getTax函数打包进最终代码，未被引用的A和B会被剔除。

这得益于Webpack 2开始支持的Tree Shaking特性，但有个前提：你的模块必须使用**ES模块（ESM）**的标准导出语法（你示例里的写法有小错误，正确的ES导出应该是：

// fileA.js 正确的ES导出写法
export function A() {}
export const B = function() {}
export const getTax = function() {}

或者统一用函数声明式导出：

export function A() {}
export function B() {}
export function getTax() {}
```）

Tree Shaking的核心是利用ES模块的**静态结构特性**——导入导出语句必须在代码顶层，不能动态生成，Webpack可以在编译阶段就精准分析出哪些导出被实际使用，哪些是“死代码”。不过要注意，Tree Shaking只是标记出未使用的代码，真正移除它们还需要配合压缩工具（比如UglifyJS、Terser），在生产环境打包时完成最终的代码剔除。

另外，如果`A`或`B`函数存在**副作用**（比如修改了全局变量、操作DOM、执行了不可移除的初始化逻辑），Webpack可能不会剔除它们。这种情况下，你可以在项目的`package.json`中通过`"sideEffects": false`声明所有模块无副作用，或者指定有副作用的文件路径，帮助Webpack更准确地判断。

## 2. Webpack是如何解析命名导入的？
Webpack对命名导入的解析过程可以分为几个关键步骤：
- **静态分析阶段**：Webpack在编译初期会扫描所有模块的导入导出语句，由于ES模块的静态特性，它不需要执行代码就能知道每个模块导出了哪些内容，以及哪些导出被其他模块引用。
- **依赖标记**：当遇到`import { getTax } from "fileA"`时，Webpack会定位到`fileA`模块，将`getTax`标记为“被使用的导出”，而`A`和`B`如果没有被任何其他模块引用，就会被标记为“未使用”。
- **模块打包**：在打包阶段，Webpack只会将标记为“被使用”的导出内容包含进对应的chunk中，未被标记的内容会在Tree Shaking和压缩阶段被移除。
- **导出匹配校验**：Webpack会严格匹配导入的名称和导出的名称（区分大小写），如果导入了不存在的导出，编译时会直接抛出错误，这也是静态分析带来的优势之一。

内容的提问来源于stack exchange，提问作者simbathesailor