Webpack 是一个现代化的 JavaScript 应用程序打包工具，它可以自动化地将 JavaScript 模块打包成一个或多个 bundle，从而使您的项目最终能够在浏览器中运行。如果您正在开发多页面应用程序，您需要将多个页面打包成一个完整的应用程序，在这种情况下，Webpack 可以为您提供帮助。本文将向您介绍如何使用 Webpack 打包多页应用程序。
1. 设置 Webpack 配置文件
首先，您需要在项目根目录下创建一个 webpack.config.js 文件，并设置好以下选项：
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
------ -
------ -----------------
------ ----------------
--
------- -
--------- -------------------
----- ----------------------- -------
--
-------- -
--- -------------------
------ ----- ---
------- ----------
--------- ------------
---
--- -------------------
------ ----- ---
------- ----------
--------- ------------
--
-
--在这个配置文件中，我们定义了两个页面，分别是 page1.js 和 page2.js，它们的输出文件名分别为 page1.bundle.js 和 page2.bundle.js。在 output 中，我们使用了 path.resolve(__dirname, 'dist') 来设置输出文件的目录为项目根目录下的 dist 目录。
此外，我们还使用了 HtmlWebpackPlugin 插件，它可以帮助我们生成 HTML 文件，并将打包后的 JavaScript 文件自动引入到 HTML 文件中。我们为每个页面都生成了一个 HTML 文件，并按照对应的 entry 中的 chunk 引入对应的 JavaScript 文件。
2. 设置页面模板
为了生成 HTML 文件，我们需要为每个页面设置一个模板。在项目根目录下，创建两个 HTML 文件，分别命名为 page1.html 和 page2.html，然后设置以下内容：
--------- ----- ----- ---------- ------ ----- ---------------- ---------- ------------------------------- ---------- ------- ------ ---- --------------- ------- -------
注意，这个模板中使用了 htmlWebpackPlugin.options.title 变量来获取 HtmlWebpackPlugin 插件中设置的页面标题。
3. 设置页面入口文件
接下来，您需要创建两个 JavaScript 文件，分别命名为 page1.js 和 page2.js，并分别设置以下代码：
------ -------- ---- ------------ ------ --- ---- -------- -------------------- --- --------------------------------
这个代码中，我们使用了 React 库来渲染一个 App 组件，并将其渲染到一个 ID 为 app 的元素中。
4. 安装依赖
最后，我们需要安装依赖项。在项目根目录下，运行以下命令来安装需要的依赖项：
--- ------- ---------- ------- ----------- -------------------
这会安装 Webpack 工具、Webpack CLI、HtmlWebpackPlugin 插件和其他必要的依赖项。
5. 打包应用程序
现在，您已经完成了所有的设置，可以开始打包应用程序了。在命令行中运行以下命令来打包应用程序：
--- --- -----
这会使用 Webpack 根据我们的配置文件来打包应用程序。打包完成后，您的应用程序将创建在 dist 目录下，可以在浏览器中打开 page1.html 或 page2.html 文件来查看应用程序效果。
结论
通过上述步骤，我们已经成功地使用 Webpack 打包了一个多页应用程序。我们可以根据需要添加更多的页面，并使用类似的设置来打包这些页面。Webpack 为多页应用程序提供了强大的打包工具，让我们更方便地进行开发。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673994ac317fbffedf178424