在前端开发中，随着项目越来越大，构建工具也变得越来越必要。Webpack 是目前最流行的构建工具之一，用于将多个 JavaScript 文件打包成单个文件，并提供了各种优化功能，例如代码压缩，代码分离和懒加载等。本文将介绍如何使用 Webpack 构建多页应用程序的最佳方案。
什么是多页应用程序？
与单页应用程序不同，多页应用程序在加载不同页面时会从服务器开始重新加载所有必需的 JavaScript、样式和 HTML 文件。这意味着开发者需要将每个页面视为独立的单元，而不是重复使用相同的 HTML 和 JavaScript。
为什么需要 Webpack？
虽然使用单个 HTML 文件可以让多页应用程序看起来更直观，但这种方法往往会导致代码冗余和慢加载速度。Webpack 的使用可以解决这些问题，让多个页面之间的代码得到优化并快速加载。
Webpack 的配置
Webpack 配置文件被称为 webpack.config.js，可以在其中定义输入文件、输出文件、加载器和插件等。多页应用程序的配置可能比较复杂，并且会在多个文件中共享相同的代码段。因此，我们可以将这些公共部分提取出来并以模块的形式重复使用。
-- -----------------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
------ -
----- ----------------
------ -----------------
--
------- -
----- ----------------------- --------
--------- -------------------
--
-------- -
--- -------------------
------ -------
--------- ------------
------- ---------
---
--- -------------------
------ --------
--------- -------------
------- ----------
---
--
--在上面的示例中，我们定义了两个页面，分别对应两个不同的 JavaScript 入口文件。在输出时，Webpack 会将这些文件分别打包到 home.bundle.js 和 about.bundle.js 中，并使用 HtmlWebpackPlugin 插件为每个页面生成 HTML 文件。
创建公共代码块
如上定义，首先我们需要将重复的代码块提取出来。为了实现这个功能，Webpack 提供了一个插件叫做 CommonsChunkPlugin，可以将多个入口模块中共享的模块提取到单独的块中，从而避免重复加载。
-- -----------------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- - ------------------ - - -------------------
-------------- - -
------ -
----- ----------------
------ -----------------
--
------- -
----- ----------------------- --------
--------- -------------------
--
-------- -
--- -------------------
------ -------
--------- ------------
------- -------- ----------
---
--- -------------------
------ --------
--------- -------------
------- --------- ----------
---
--- --------------------
----- ---------
---------- -- -- ------ ------ -----
---
--
--在上面的示例中，我们将 CommonsChunkPlugin 插件添加到了配置中，并将其放在了 HtmlWebpackPlugin 插件之前。这是因为 HtmlWebpackPlugin 会根据传递的 chunks 参数来确定需要为 HTML 文件添加哪些 JavaScript 依赖，因此 CommonsChunkPlugin 要先于 HtmlWebpackPlugin 执行。
加载器
除了打包 JavaScript 代码，Webpack 还可以通过加载器对其他类型的文件进行处理，例如 CSS、LESS、SASS、图片和字体等等。这些加载器可以将文件编译成可以被浏览器识别的格式，并将其打包到输出目录中。
-- -----------------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- - ------------------ - - -------------------
-------------- - -
------ -
----- ----------------
------ -----------------
--
------- -
----- ----------------------- --------
--------- -------------------
--
------- -
------ -
-
----- ----------
---- ---------------- --------------
--
-
----- -----------------------------
----- -----------------
--
-
----- -------------------------------
----- -----------------
--
--
--
-------- -
--- -------------------
------ -------
--------- ------------
--------- ------------------
------- -------- ----------
---
--- -------------------
------ --------
--------- -------------
--------- -------------------
------- --------- ----------
---
--- --------------------
----- ---------
---------- -- -- ------ ------ -----
---
--
--在上面的示例中，我们定义了三个加载器：CSS 加载器、图片加载器和字体加载器。Webpack 会按照声明的测试条件来查找符合条件的文件，并将加载器应用于它们。
CSS 加载器将我们的 CSS 文件转换成 JavaScript 对象，以便其他加载器和插件可以处理它们。它们被序列化为“CSS 模块”，这些模块具有自己的私有变量和方法，以避免 CSS 之间的命名冲突。
图片和字体加载器在加载文件时将其转换成 base64 字符串，以便可以直接在 HTML 或 CSS 中使用它们。这通常是一种快速且方便的方法，但也会增加文件大小。如果文件大小很大，建议将其打包成单独文件，在需要时异步加载它们。
结论
在本文中，我们探讨了如何使用 Webpack 构建多页应用程序，并讨论了一些最佳实践。在实际项目中，可能会使用许多其他工具，例如 Babel、TypeScript、PostCSS 等，以及其他 Webpack 插件和加载器，以实现更高级的功能。
全文代码：
-- -----------------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- - ------------------ - - -------------------
-------------- - -
------ -
----- ----------------
------ -----------------
--
------- -
----- ----------------------- --------
--------- -------------------
--
------- -
------ -
-
----- ----------
---- ---------------- --------------
--
-
----- -----------------------------
----- -----------------
--
-
----- -------------------------------
----- -----------------
--
--
--
-------- -
--- -------------------
------ -------
--------- ------------
--------- ------------------
------- -------- ----------
---
--- -------------------
------ --------
--------- -------------
--------- -------------------
------- --------- ----------
---
--- --------------------
----- ---------
---------- -- -- ------ ------ -----
---
--
--来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67387a07317fbffedf10c724