随着前端开发的日益复杂，单页面已经不能完全满足开发需求。因此，多页面应用（MPA）成为了开发中的一个重要问题。Webpack 是一个强大的现代化前端构建工具，它提供了多种构建多页面应用的方式。在本文中，我们将探讨Webpack中的多页面实现方式。
起步
Webpack 支持多页面的开发是通过 entry 和 HtmlWebpackPlugin 这两个配置项来实现的。entry 用于指定各个页面的入口文件，HtmlWebpackPlugin 用于根据入口文件生成 HTML 文件及其相关的资源文件。
首先，我们需要在 webpack.config.js 中配置多个 entry：
-- -------------------- ---- -------
-------------- - -
------ -
------ -----------------
------ -----------------
-------- ------------------
--
------- -
--------- -------------------
----- ----------------------- -------
-
--这里我们定义了三个入口文件：index.js、about.js 和 contact.js，它们将分别生成对应的 index.html、about.html 和 contact.html。我们还设置了 [name].bundle.js 作为输出文件的名字，[name] 表示入口文件的名称。生成的文件将被输出到 dist 目录下。
接下来，我们需要使用 HtmlWebpackPlugin 来生成 HTML 文件：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-- ---
-------------- - -
-- ---
-------- -
--- -------------------
------ --------
--------- -------------
------- ---------
---
--- -------------------
------ --------
--------- -------------
------- ---------
---
--- -------------------
------ ----------
--------- ---------------
------- -----------
--
-
--这里我们用到了 HtmlWebpackPlugin 插件来生成 HTML 文件。我们定义了三个实例，分别对应着三个入口文件，并设置了输出的 HTML 文件名、chunks（需要引入的打包后的 JS 文件）、页面标题等等。output 的 path 配置项已经指定了输出目录，所以我们不需要在这里再次指定。
多页面应用中的公共资源
在多页面应用中，为了提高代码的复用性和性能，我们需要为多个页面共用的资源提供单独的打包方式。Webpack 提供了 SplitChunksPlugin 来分离公共代码。
我们可以在配置文件中加入如下代码（Webpack 4+）：
module.exports = {
optimization: {
splitChunks: {
chunks: 'all'
}
}
};这样，Webpack 就会自动分离出公共代码部分，生成单独的 chunk，并自动添加其依赖的模块。我们还可以通过配置项进一步控制哪些模块应该被分离出来。
多页面应用中的 CSS
随着多页面应用变得更加复杂，我们的 CSS 样式表也变得越来越大。如果将所有 CSS 都放在入口文件中，会导致文件大小过大，同时每次页面跳转时都需要重新加载整个样式表。这显然不是最优的解决方案。
Webpack 提供了多种方式来处理 CSS，包括使用 style-loader 和 css-loader，使用 ExtractTextPlugin 提取样式表为单独文件等等。这些插件同样可以用于多页面应用中，我们只需要按照需要配置相应的插件即可。
下面是一种常用的处理方式：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- -
---------------
------------
-
-
-
--
-------- -
--- ----------------------
--------- -------------
-------------- ----------
--
-
--这里我们定义了一个处理 CSS 的 rule，使用了 style-loader 和 css-loader。然后我们又用了一个 MiniCssExtractPlugin 插件将样式表抽离出来。这样，每个 HTML 文件就只需要引入自己需要的 CSS 文件，避免了整体加载的问题。
多页面应用中的图片资源
在多页面应用中，我们经常需要引入图片资源。Webpack 提供了多种处理方式，包括使用 file-loader 和 url-loader 等等。在多页面应用中，我们同样需要为图片资源提供单独的处理方式。
这里我们可以采用以下方式：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- -----------------------
---- -
-------------
-
-
-
-
--这里我们定义了一个处理图片资源的 rule，使用了 file-loader。这样，我们就可以通过该 rule 来处理多个入口文件中的图片资源，并将它们打包为单独的文件。
总结
在本文中，我们讨论了在Webpack中如何开发多页面应用。我们了解了如何配置多个入口文件、如何使用 HtmlWebpackPlugin 插件生成 HTML 文件以及如何处理 CSS 和图片资源。同时，我们还讨论了如何优化多页面应用中的性能问题，包括分离公共代码和抽离样式表等等。
相信阅读完本文，你已经对如何使用Webpack开发多页面应用有了更深入的理解。希望本文能够帮助你在开发中更加前行，让你的开发变得更加高效、简单和有益！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648c0b9548841e9894a57beb