前言
随着互联网行业的快速发展，Web 应用呈现出了越来越多的复杂度和多样性。而对于一些较为复杂的应用，我们通常会采用多页应用的方式来进行开发。而在多页应用的开发过程中，最常用的打包工具就是 Webpack。
本篇文章将从实例出发，详细讲解如何搭建一个基于 Webpack 的多页应用。
Webpack 基础
在开始配置多页应用之前，我们需要先了解一些关于 Webpack 的基础知识。
入口与出口
在 Webpack 中，我们需要指定一个或多个入口文件。入口文件告诉 Webpack 从哪个文件开始打包。而在打包过程中，打包后的文件将会被输出到指定的出口文件中。
// webpack.config.js
module.exports = {
entry: { app: './src/index.js' },
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js',
},
};在上面的例子中，我们指定了一个入口文件为 src/index.js，出口文件为 dist/app.bundle.js。
Loader
Loader 是 Webpack 最重要的功能之一，它用于处理非 JavaScript 文件（例如：CSS，LESS，图片等）。
当遇到这些非 JavaScript 文件时，Webpack 不知道如何进行处理。但是通过使用 Loader，我们可以告诉 Webpack 如何去处理这些文件。
-- -------------------- ---- -------
-- -----------------
-------------- - -
------- -
------ -
-
----- ----------------
---- -
---------------
-------------
--------------
--
--
-
----- ----------------------
------- --------------
-------- -
----- -------------------------------
--
--
--
--
--在上面的例子中，我们配置了两个 Loader。第一个用于处理 CSS 和 LESS，第二个用于处理图片。
插件
和 Loader 一样，插件也是 Webpack 的一个核心功能。通过使用插件，我们可以完成更多复杂的任务，例如：代码压缩，提取公共代码等。
// webpack.config.js
module.exports = {
plugins: [new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
chunks: ['app'],
})],
};在上面的例子中，我们使用了 HtmlWebpackPlugin 插件，这个插件用于自动生成 HTML 文件，并插入我们打包后的 JavaScript 文件。
多页应用实例
在了解了一些 Webpack 的基础知识后，我们来看一下如何使用 Webpack 搭建一个多页应用。
在实例中，我们将搭建一个主页（index.html）和一个关于页面（about.html）。
准备工作
首先，我们需要创建一个目录：webpack-multi-page，并在该目录下创建一个文件夹 src，一个文件夹 dist，以及一个文件 package.json。
-- -------------------- ---- -------
-- ------------
-
------- ---------------------
---------- --------
---------- -
-------- -------- ----- ------ -------------
-------- -------- ------ -----------
--
--------------- -
---------- ----------
-------------- ---------
--------------------- ----------
---------------------- ---------
------------- ---------
--------------- ---------
------- ---------
-------------- ---------
-------------- --------
-
-在 package.json 文件中，我们指定了一些必要的依赖项。其中，webpack 和 webpack-cli 用于打包时使用，webpack-dev-server 用于开发时使用，html-webpack-plugin 用于生成 HTML 文件，css-loader 和 style-loader 用于处理 CSS 文件，less 和 less-loader 用于处理 LESS 文件，file-loader 用于处理图片文件。
配置 Webpack
然后，我们在 webpack-multi-page 目录下新建一个配置文件 webpack.config.js。
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
------ -
------ ---------------------------
------ ---------------------------
--
------- -
----- ----------------------- --------
--------- -----------------------------
----------- ---
--
------- -
------ -
-
----- ----------------
---- -
---------------
-------------
--------------
--
--
-
----- ----------------------
------- --------------
-------- -
----- -------------------------------
--
--
--
--
-------- -
--- -------------------
--------- -------------
--------- -------------------
------- ----------
---
--- -------------------
--------- -------------
--------- -------------------
------- ----------
---
--
--在上面的配置中，我们指定了两个入口文件：index.js 和 about.js。每个入口文件对应一个 HTML 文件。为了使 HTML 文件能够正确引入打包后的 JavaScript 文件，我们使用了 HtmlWebpackPlugin 插件。
我们将 HTML 文件保存到了 src 目录下，使用相对路径引用文件。打包后，这些文件会保存到 dist 目录下。
编写页面
现在，我们可以开始编写我们的页面了。在 src 目录下新建 index.html 和 about.html 文件。
-- -------------------- ---- -------
---- ---------- ---
--------- -----
----- ----------
------
----- ----------------
-------------- ---------- -----------
----- ---------------- --------------------------------
-------
------
---- ------------------
--------- -----------
------
------- -------------------------------------
-------
--------- -------------------- ---- -------
---- ---------- ---
--------- -----
----- ----------
------
----- ----------------
------------ - ------- ---------- -----------
----- ---------------- --------------------------------
-------
------
---- ------------------
--------------
------- -- -- ----- ---------
------
------- -------------------------------------
-------
-------在这两个页面中，我们分别引入了打包后的 JavaScript 文件和 CSS 文件。需要注意的是，在这里我们使用相对路径来引用文件。这是因为在开发过程中，Webpack Dev Server 默认会启动在根目录下，而我们在 webpack.config.js 中指定了输出文件保存的目录为 dist，所以在编写 HTML 文件时需要注意路径的设置。
编写 JavaScript 和 CSS
我们在 src 目录下创建两个 JS 文件和两个 LESS 文件，分别对应主页和关于页面。
// index.js
console.log('This is index.js.');// about.js
console.log('This is about.js.');-- -------------------- ---- ------- -- ---------- -- ---------- - ----------------- -------- -------- ----- - -- ---------- -- ---------- - ----------------- -------- -------- ----- -
这里我们将两个页面的 CSS 样式设置为相同的，方便演示。
运行项目
最后，我们在控制台输入 npm run start 命令来启动开发服务器并开始开发。
在浏览器中访问 http://localhost:8080/index.html 和 http://localhost:8080/about.html，即可看到我们编写的页面。
打包项目
在开发完成后，我们需要将项目打包为生产环境下的代码。
在控制台中输入 npm run build 命令即可打包项目。打包后，dist 目录下将会生成打包后的文件。
总结
本文讲述了如何使用 Webpack 搭建一个多页应用。在实例中，我们使用了 Webpack 的入口和出口概念，Loader 和插件等功能。同时，我们还讲述了 HTML 文件的编写和路径设置方法。希望本文能够帮助你更好地了解如何使用 Webpack 搭建多页应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d39998b5eee0b525b3b05c