前言
Webpack 是一个现代化的前端构建工具，它的强大之处在于可以将多个 JavaScript 文件打包成一个文件，从而减少 HTTP 请求次数，提高网站的性能。但是，Webpack 默认只支持单页面打包，对于多页面应用来说，需要一些额外的配置才能实现。
本文将介绍如何使用 Webpack 实现多页面打包，并提供示例代码供大家参考。
准备工作
在开始之前，你需要先安装 Node.js 和 Webpack。如果你还没有安装，可以参考官方文档进行安装。
配置多页面入口
在单页面应用中，Webpack 只需要一个入口文件即可。但是，在多页面应用中，每个页面都有自己的入口文件，因此我们需要配置多个入口文件。
在 Webpack 的配置文件中，我们可以使用 entry 属性来配置入口文件。下面是一个简单的多页面应用的配置示例：
-- -------------------- ---- -------
-------------- - -
------ -
------ -----------------
------ -----------------
-------- ------------------
--
------- -
--------- -------------------
----- ----------------------- -------
-
--在上面的示例中，我们定义了三个入口文件：index.js、about.js 和 contact.js。每个入口文件对应一个页面。[name] 是一个占位符，会被替换为入口文件的名称。输出文件的名称会变成 index.bundle.js、about.bundle.js 和 contact.bundle.js。
配置多页面模板
在多页面应用中，每个页面都有自己的 HTML 模板。这些模板需要包含对应的 JavaScript 文件，以便页面能够正常运行。
我们可以使用 Webpack 提供的 html-webpack-plugin 插件来自动生成 HTML 文件，并自动引入对应的 JavaScript 文件。
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
------ -
------ -----------------
------ -----------------
-------- ------------------
--
------- -
--------- -------------------
----- ----------------------- -------
--
-------- -
--- -------------------
--------- -------------------
--------- -------------
------- ---------
---
--- -------------------
--------- -------------------
--------- -------------
------- ---------
---
--- -------------------
--------- ---------------------
--------- ---------------
------- -----------
--
-
--在上面的示例中，我们使用了 HtmlWebpackPlugin 插件来生成 HTML 文件。template 属性指定了 HTML 模板文件的路径，filename 属性指定了生成的 HTML 文件的名称，chunks 属性指定了要引入的 JavaScript 文件。
配置多页面公共模块
在多页面应用中，有些模块可能会被多个页面共用。为了避免这些模块重复打包，我们可以将它们提取出来，生成一个公共模块。
我们可以使用 Webpack 提供的 CommonsChunkPlugin 插件来实现这个功能。
-- -------------------- ---- -------
----- ------- - -------------------
-------------- - -
------ -
------ -----------------
------ -----------------
-------- ------------------
--
------- -
--------- -------------------
----- ----------------------- -------
--
-------- -
--- -------------------
--------- -------------------
--------- -------------
------- --------- ---------
---
--- -------------------
--------- -------------------
--------- -------------
------- --------- ---------
---
--- -------------------
--------- ---------------------
--------- ---------------
------- ----------- ---------
---
--- -------------------------------------
----- --------
--
-
--在上面的示例中，我们使用了 CommonsChunkPlugin 插件来提取公共模块。name 属性指定了公共模块的名称。
配置多页面 CSS
在多页面应用中，每个页面都有自己的 CSS 文件。我们可以使用 style-loader 和 css-loader 来打包 CSS 文件。
-- -------------------- ---- -------
-------------- - -
------ -
------ -----------------
------ -----------------
-------- ------------------
--
------- -
--------- -------------------
----- ----------------------- -------
--
------- -
------ -
-
----- ---------
---- -
---------------
------------
-
-
-
--
-------- -
--- -------------------
--------- -------------------
--------- -------------
------- --------- ---------
---
--- -------------------
--------- -------------------
--------- -------------
------- --------- ---------
---
--- -------------------
--------- ---------------------
--------- ---------------
------- ----------- ---------
---
--- -------------------------------------
----- --------
--
-
--在上面的示例中，我们使用了 style-loader 和 css-loader 来打包 CSS 文件。module 属性中的 rules 数组指定了打包 CSS 文件的规则。
总结
在本文中，我们介绍了如何使用 Webpack 实现多页面打包。我们需要配置多个入口文件、多个 HTML 模板和一个公共模块。我们还介绍了如何打包 CSS 文件。
希望本文能够对大家学习和使用 Webpack 有所帮助。如果你有任何问题或建议，请在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6514ed2895b1f8cacdd4f0a1