【Webpack】处理 node_modules 中的依赖

概述

当我们在使用 import 语句导入模块时，Webpack 会处理 node_modules 中的依赖。

具体来说，Webpack 会从 node_modules 目录中查找模块，并根据配置，比如 resolve.extensions 和 resolve.modules，确定模块路径，然后将模块打包到最终的构建文件中。

Webpack 通过 resolve 配置来决定如何查找 node_modules 中的模块，也会使用类似 loaders 来处理不同类型的文件。

扩展知识

1）Webpack 插件和 Loader 使用

Webpack 本身是一个高度可定制的工具，它通过插件（plugins）和加载器（loaders）来处理不同类型的文件。在解析 node_modules 时，Webpack 可能会需要特定的 loader 来处理这些模块中的特殊文件，比如 babel-loader 用于处理 JavaScript 文件中的现代 ES6+ 语法。

2）Tree Shaking

当 Webpack 打包依赖时，它会进行 Tree Shaking，去除未使用的代码。对于大多数现代库，特别是那些使用 ES6 模块语法的库，Webpack 能够有效地剔除没有使用的部分，从而减少最终的包大小。

3）打包优化

Webpack 在处理 node_modules 中的依赖时，也提供一些优化策略，比如：

• Code Splitting：将代码分割成多个包，以便更高效地加载。
• Caching：利用持久化缓存 module cache 以加快后续构建速度。
• DLLPlugin：预编译特定库，从而减少每次构建过程中对这些大文件的处理时间。

4）Webpack 配置

• resolve.modules：告诉 Webpack 解析模块时需要搜索的目录，默认为 node_modules，可以自定义其他目录。
• resolve.alias：创建模块别名，简化模块导入。
• externals：防止某些包被打包，可以配置某些模块从外部依赖中引入。

5）Babel 与 Webpack 的配合

很多时候，我们需要使用 Babel 与 Webpack 一起工作来将现代 JavaScript 转换为兼容性更好的版本。babel-loader 会读取 .babelrc 配置文件，确定需要怎样转换代码。这特别有利于处理从 node_modules 中导入的包。