什么是多页面应用
多页面应用（MPA）是指一个网站由多个页面组成，每个页面都相对独立，有自己的 HTML、CSS 和 JavaScript 文件。相对于单页面应用（SPA），MPA 更适用于一些需要SEO优化、快速响应、占用更少资源的场景。
Webpack 构建多页面应用的好处
使用 Webpack 构建多页面应用有以下好处：
代码拆分：在多页面应用中，每个页面都有自己的 JS 文件，因此可以将公共 JS 代码提取到一个单独的文件中，减小了每个页面需要加载的 JS 文件大小，提高了页面的加载速度。
自动化：Webpack 提供了许多插件和 loader，可以对代码进行压缩、合并等操作，还能对静态资源进行优化，自动化构建多页面应用，提高了效率。
可维护性：Webpack 构建工具对于使用者来说，是非常方便的，它可以让我们尽可能地去管理多页面应用的所有资源（HTML、CSS、JS 等文件）。
Webpack 构建多页面应用的具体实现
以下是构建多页面应用的步骤：
安装并配置 Webpack
配置多个入口
在入口中设置多个 entry，每个 entry 对应一个页面，如下所示：
entry: {
home: './home.js',
about: './about.js',
contact: './contact.js'
},- 生成多个 HTML 文件
为每个 entry 生成一个 HTML 文件，使用 html-webpack-plugin 插件可以方便地生成 HTML。
-- -------------------- ---- -------
-------- -
--- -------------------
--------- ------------
------- ---------
--------- ---------------
---
--- -------------------
--------- -------------
------- ----------
--------- ----------------
---
--- -------------------
--------- ---------------
------- ------------
--------- ------------------
--
-- 提取公共代码
使用 CommonsChunkPlugin 插件可以提取公共代码。
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'common'
})
]最终的 webpack 配置文件可能如下所示：
-- -------------------- ---- -------
----- ------- - -------------------
----- ----------------- - -------------------------------
-------------- - -
------ -
----- ------------
------ -------------
-------- --------------
--
------- -
--------- ---------------------
----- --------- - -------
--
-------- -
--- -------------------
--------- ------------
------- -------- ----------
--------- ---------------
---
--- -------------------
--------- -------------
------- --------- ----------
--------- ----------------
---
--- -------------------
--------- ---------------
------- ----------- ----------
--------- ------------------
---
--- -------------------------------------
----- --------
--
-
--总结
使用 Webpack 构建多页面应用可以提高代码的可维护性和自动化构建的效率，同时还能增加代码的可拓展性和可配置性。本文介绍了具体的实现步骤，包括多个入口、生成多个 HTML 文件和提取公共代码等技巧，希望能对于开发者构建多页面应用有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645d94c9968c7c53b0000574