Webpack 初学者指南

最新推荐文章于 2024-05-02 23:09:04 发布

Peter 谭

最新推荐文章于 2024-05-02 23:09:04 发布

阅读量411

点赞数

文章标签： vue python js javascript java

本文链接：https://blog.csdn.net/petertanjinjie/article/details/118348207

版权

❝
如今，我们不得不使用许多辅助工具来促进、加速和优化我们的 Web 开发工作流程。但是，这些工具通常会在堆栈中增加一层额外的复杂性。因此，我们需要利用额外的时间和精力来正确学习、理解和使用这些工具。「webpack」也是如此。
❞

第一次使用 webpack 时，可能很难理解它是如何工作的以及应该如何使用它。尽管它有很好的文档，但对于新手来说可能会令人生畏，而且它的学习曲线很陡峭。但是，webpack 值得学习，从长远来看可以节省相当多的时间和精力。在本教程中，我将介绍所有核心概念以帮助您入门。

「注意：在本教程中，我使用了 webpack 5.9.0」。

什么是 Webpack？

作为其核心，webpack 是一个「静态模块打包器」。在特定项目中，webpack 将所有文件和资产视为模块。在幕后，它依赖于依赖图。依赖图描述了模块如何使用文件之间的引用（require和import语句）相互关联。通过这种方式，webpack 静态遍历所有模块来构建图，并使用它生成单个包（或多个包）——一个 JavaScript 文件，其中包含以正确顺序组合的所有模块的代码。“静态”意味着，当 webpack 构建其依赖关系图时，它不会执行源代码，而是将模块及其依赖项拼接成一个包。然后可以将其包含在您的 HTML 文件中。

现在，为了扩展上述粗略的概述，让我们探索 webpack 使用的主要概念。

Webpack 主要概念

Webpack 有一些主要概念，我们需要在深入了解其实际实现之前清楚地了解这些概念。让我们一一检查它们：

「入口」：入口点是 webpack 用来开始构建其内部依赖图的模块。从那里，它确定入口点依赖于哪些其他模块和库（直接和间接）并将它们包含在图中，直到没有依赖关系为止。默认情况下， entry 属性设置为./src/index.js，但我们可以在 webpack 配置文件中指定不同的模块（甚至多个模块）。
「Output」 : output 属性指示 webpack 在哪里发出包以及用于文件的名称。此属性的默认值用于./dist/main.js主包和./dist其他生成的文件——例如图像。当然，我们可以根据需要在配置中指定不同的值。
「Loaders」：默认情况下，webpack 只理解 JavaScript 和 JSON 文件。为了处理其他类型的文件并将它们转换为有效的模块，webpack 使用加载器。加载器转换非 JavaScript 模块的源代码，允许我们在将这些文件添加到依赖关系图之前对其进行预处理。例如，加载器可以将文件从 CoffeeScript 语言转换为 JavaScript 或将内嵌图像转换为数据 URL。使用加载器，我们甚至可以直接从 JavaScript 模块导入 CSS 文件。
「插件」：插件用于加载器无法完成的任何其他任务。他们为我们提供了关于资产管理、捆绑最小化和优化等的广泛解决方案。
「模式」：通常，当我们开发应用程序时，我们使用两种类型的源代码——一种用于开发构建，一种用于生产构建。Webpack 允许我们通过将 mode 参数更改为development、production或none来设置我们想要生产的产品。这允许 webpack 使用与每个环境相对应的内置优化。默认值为生产。在没有模式意味着没有预设的优化选项将被使用。要了解有关 webpack 在开发和生产模式中使用的选项的更多信息，请访问「模式配置页面」。

Webpack 的工作原理

在本节中，我们将研究 webpack 是如何工作的。即使是一个简单的项目也包含 HTML、CSS 和 JavaScript 文件。此外，它还可以包含字体、图像等资产。因此，典型的 webpack 工作流将包括index.html使用适当的 CSS 和 JS 链接以及必要的资产来设置文件。此外，如果您有许多相互依赖的 CSS 和 JS 模块，则需要对它们进行优化并正确组合在一个单元中以备生产。

要做到这一切，webpack 依赖于配置。从版本 4 及更高版本开始，webpack 提供了开箱即用的合理默认值，因此不需要创建配置文件。但是，对于任何重要的项目，您都需要提供一个特殊webpack.config.js文件，它描述了文件和资产应该如何转换以及应该生成什么样的输出。这个文件很快就会变得单一，除非你知道它工作背后的主要概念，否则很难理解 webpack 是如何工作的。

基于提供的配置，webpack 从入口点开始，解析它在构建依赖图时遇到的每个模块。如果模块包含依赖项，则对每个依赖项递归执行该过程，直到遍历完成。然后 webpack 将项目的所有模块打包成少量的包---通常只有一个——由浏览器加载。

Webpack 5 中的新功能

2020 年 10 月发布了 webpack 5 版本。这篇文章很长，探讨了对 webpack 所做的所有更改。不可能提及所有更改，并且对于这样的初学者指南来说是不必要的。相反，我将尝试列出一个包含一些一般亮点的小清单：

持久缓存提高了构建性能。开发人员现在可以启用基于文件系统的缓存，这将加快开发构建。
长期缓存也得到了改进。在 webpack 5 中，对不影响最小化包版本（注释、变量名称）的代码所做的更改不会导致缓存失效。此外，还添加了新算法，这些算法以确定的方式为模块和块分配短数字 ID，并将短名称分配给导出。在 webpack 5 中，它们在生产模式下默认启用。
由于更好的 Tree Shaking 和代码生成，改进了包的大小。由于新的 Nested Tree-Shaking 功能，webpack 现在能够跟踪对导出的嵌套属性的访问。CommonJs Tree Shaking 允许我们消除未使用的 CommonJs 导出。
最低支持的 Node.js 版本已从 6 增加到 10.13.0 (LTS)。
代码库被清理。所有在 webpack 4 中标记为弃用的项目都被删除。
自动 Node.js polyfills 被移除。以前版本的 webpack 已经包含了原生 Node.js 库的 polyfill，比如crypto.在许多情况下，它们是不必要的，并且会大大增加包的大小。这就是为什么 webpack 5 停止自动填充这些核心模块并专注于前端兼容模块的原因。
作为开发的改进，webpack 5 允许我们传递目标列表并支持目标版本。它提供公共路径的自动确定。而且，它提供了自动的、唯一的命名，可防止使用相同全局变量进行块加载的多个 webpack 运行时之间发生冲突。
该webpack-dev-server命令是现在webpack serve。
资产模块进行介绍，其中替换的用途file-loader，raw-loader和url-loader。