Webpack 是一款非常流行的前端打包工具，它的强大之处在于可以将各种资源，如 js、css、图片等打包在一起，让我们的项目更加高效地加载。在多页应用中，Webpack 可以通过合适的配置，实现多入口、多页面的打包部署。本文将介绍如何使用 Webpack 配置多页面项目。
准备工作
在开始配置之前，需要先安装 Webpack 和相关工具。这里以安装最新版本（v5.61.0）的 Webpack 为例：
npm install webpack webpack-cli --save-dev
同时需要安装 html-webpack-plugin 插件：
npm install html-webpack-plugin --save-dev
配置入口和输出
针对多页面应用，我们需要对 Webpack 的入口进行配置。在 webpack.config.js 文件中配置入口：
module.exports = {
entry: {
index: './src/index.js',
about: './src/about.js',
}
};上面的配置表示我们的应用有两个页面，分别为 index 和 about。它们分别对应两个入口文件 index.js 和 about.js。接下来，需要配置输出：
-- -------------------- ---- -------
-------------- - -
------ -
------ -----------------
------ -----------------
--
------- -
--------- -----------------------------
----- ----------------------- -------
-
--filename 字段指定了输出文件的名称，其中 [name] 表示入口的名称，[chunkhash:8] 表示添加 hash 值且只保留 8 位，以防止缓存问题。path 字段则指定了输出文件的路径。当执行 npm run build 命令时，webpack 会根据入口和输出的配置，将打包结果输出到 dist 目录下。
配置插件
在多页面应用中，我们需要为每个页面生成一个对应的 html 文件。可以使用 html-webpack-plugin 插件来实现这一功能：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
------ -
------ -----------------
------ -----------------
--
------- -
--------- -----------------------------
----- ----------------------- -------
--
-------- -
--- -------------------
--------- -------------
--------- -------------------
------- ---------
---
--- -------------------
--------- -------------
--------- -------------------
------- ---------
--
-
--HtmlWebpackPlugin 提供了多个配置项，其中 filename 表示生成的文件名称，template 则为该文件采用的模板文件。chunks 字段指定了该页面依赖的入口文件。
加载资源
在开发中，我们通常会使用图片、字体等资源。通过 Webpack，我们可以在代码中使用 import 的方式引入这些资源：
import img from './logo.png';
import font from './font.ttf';
const logo = new Image();
logo.src = img;
document.body.style.fontFamily = `MyFont, ${font}`;Webpack 中需要加载和解析图片和字体等文件，我们需要在配置文件中添加相应的 loader：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ----------------------
------- --------------
-------- -
----- -------------------------------
--
--
-
----- -------------------------------
----- -----------------
--
--
--
--在上面的配置中，使用 file-loader 加载图片文件，并通过 options 配置生成的文件名称和路径。而对于字体文件，则通过 asset/resource 加载。
使用 devServer
在开发阶段，我们可以使用 webpack-dev-server 来搭建一个本地调试环境。在配置文件中添加如下代码：
module.exports = {
//...
devServer: {
contentBase: './dist',
port: 8080
}
};其中 contentBase 指定了服务器的文件目录，需要与输出路径保持一致。port 则为服务器的端口号。在安装完 webpack-dev-server 后，在命令行中执行 npx webpack serve --open 命令即可启动服务器，并自动打开默认浏览器。
总结
本文介绍了如何使用 Webpack 配置多页面项目。通过配置入口、输出、插件和加载资源等，我们可以实现多页应用的打包部署。同时，使用 webpack-dev-server 可以快速搭建本地开发环境，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645f4e58968c7c53b015a26e