这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天
## Webpack | 青训营笔记
Webpack
Webpack 通过解决一个基本问题来简化 Web 开发：捆绑。它接受各种资产，如JavaScript，CSS和HTML，并将它们转换为方便通过浏览器使用的格式。做好这一点可以减轻 Web 开发带来的大量痛苦。
1、什么是网络包
Web 浏览器使用 HTML、CSS、JavaScript 和多媒体文件。随着项目的发展，跟踪所有这些文件并使它们适应不同的目标（例如浏览器）变得太复杂，无法在没有帮助的情况下进行管理。Webpack 解决了这些问题。管理复杂性是Web开发的基本问题之一，很好地解决这个问题有很大帮助。
Webpack 并不是唯一可用的捆绑器，并且已经出现了不同工具的集合。任务运行器，如Grunt和Gulp，是更高级工具的很好的例子。通常，问题是您需要手动编写工作流。将该问题推送到捆绑器（例如 webpack）是向前迈出的一步。
特定于框架的抽象，例如create-react-app，rockpack或@angular / cli，在下面使用webpack。也就是说，如果您必须自定义设置，那么了解该工具仍然有价值。
2、
Webpack走另一条路。它允许您将项目视为依赖项图。您可以在项目中有一个通过标准或语句拉入项目所需的依赖项。如果需要，可以以相同的方式引用样式文件和其他资源。index.js``require``import
Webpack 为您完成所有预处理，并通过其配置和代码为您提供指定的捆绑包。这种声明式方法是通用的，但很难学习。
Webpack 在您开始了解它的工作原理后成为不可或缺的工具。这本书的存在是为了度过最初的学习曲线，甚至走得更远。
3、Webpack 依赖于模块
您可以与 webpack 捆绑的最小项目由输入和输出组成。捆绑过程从用户定义的条目开始。条目本身是模块，可以通过导入指向其他模块。
当您使用 webpack 捆绑项目时，它会遍历导入，构建项目的依赖关系图，然后根据配置生成输出。此外，还可以定义拆分点以在项目代码本身中创建单独的捆绑包。
在内部，webpack 使用所谓的块来管理捆绑过程，该术语经常出现在 webpack 相关文档中。块是包含在 webpack 输出中看到的捆绑包中的较小代码段。
Webpack 支持开箱即用的 ES2015、CommonJS、MJS 和 AMD 模块格式。还支持WebAssembly，这是一种在浏览器中运行低级代码的新方法。加载器机制也适用于CSS，通过css-loader提供支持。您可以找到用于特定任务的插件，例如缩小、国际化、HMR 等
4、解决过程
条目本身是一个模块，当 webpack 遇到一个模块时，它会尝试使用配置将模块与文件系统进行匹配。例如，您可以告诉 webpack 除了 之外，还要对特定目录执行查找。
如果解析传递失败，webpack 将引发运行时错误。如果 webpack 设法解析了一个文件，那么 webpack 会根据加载器定义对匹配的文件执行处理。每个加载程序对模块内容应用特定的转换。
可以通过多种方式配置加载程序与已解析文件的匹配方式，包括按文件类型和文件系统中的位置。Webpack 的灵活性甚至允许您根据文件导入到项目中的位置对文件应用特定的转换。
对 webpack 的加载器执行相同的解析过程。Webpack 允许您在确定它应该使用哪个加载器时应用类似的逻辑。因此，加载程序具有自己的解析配置。如果 webpack 无法执行加载程序查找，它将引发运行时错误。
5、Webpack 针对任何文件类型进行解析
Webpack 将解析它在构建依赖关系图时遇到的每个模块。如果条目包含依赖项，则将针对每个依赖项递归执行该过程，直到遍历完成。Webpack 可以针对任何文件类型执行此过程，这与 Babel 或 Sass 编译器等专用工具不同。
Webpack 使您可以控制如何处理遇到的不同资产。例如，您可以决定将资产内联到 JavaScript 捆绑包以避免请求。Webpack 还允许您使用 CSS 模块等技术将样式与组件耦合。Webpack 生态系统充满了扩展其功能的插件。
虽然 webpack 主要用于捆绑 JavaScript，但它可以捕获图像或字体等资产，并为它们发出单独的文件。条目只是捆绑过程的起点，webpack 发出什么完全取决于您配置它的方式。
