前言
随着前端开发技术的日益发展，Webpack 逐渐成为了前端开发中不可缺少的一款工具。通过使用 Webpack，我们能够自动化构建、打包和优化前端资源，提高前端开发效率。本文将介绍如何使用 Webpack 构建一个多页面应用。
准备工作
在开始使用 Webpack 构建多页面应用之前，我们需要先了解几个基本概念：
- 入口（entry）：指定 Webpack 打包的入口文件，每个入口文件会被打包成一个单独的 JavaScript 文件。多个入口文件会生成多个 JavaScript 文件，用于对应多个页面。
- 出口（output）：指定 Webpack 打包后的输出路径和文件名。
- 插件（plugins）：用于在 Webpack 打包过程中进行自定义操作，比如压缩 JavaScript、提取公共模块等。
- 加载器（loaders）：用于在 Webpack 打包过程中对不同类型的文件进行处理，例如将 ES6 语法转换成 ES5 语法、将 Sass 编译成 CSS 等。
构建多页面应用
创建项目
首先，我们需要在本地创建一个新的项目。使用以下命令创建一个新的项目目录：
mkdir webpack-multipage-app cd webpack-multipage-app
然后，使用以下命令初始化项目并安装 Webpack：
npm init -y npm install webpack webpack-cli --save-dev
设置入口和出口
接下来，我们需要在项目中创建几个页面，并为每个页面设置对应的入口和出口。在项目根目录下创建一个 src 文件夹，然后在该文件夹下创建三个子文件夹 page1、page2 和 page3，分别代表三个页面。
在 page1、page2 和 page3 文件夹下分别创建一个 index.js 文件，这些文件将会是 Webpack 构建的入口文件。我们需要在 webpack.config.js 文件中设置对应的入口和出口：
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
-------------- - -
------ -
------ -----------------------
------ -----------------------
------ ----------------------
--
------- -
--------- ------------
----- ----------------------- -------
-
--在以上代码中，我们设置了三个入口文件 page1/index.js、page2/index.js 和 page3/index.js，它们将会被打包成三个 JavaScript 文件 page1.js、page2.js 和 page3.js。输出文件的文件名由 [name] 占位符动态生成，对应于每个入口的名称。这些打包后的 JavaScript 文件将会输出到 dist 文件夹下。
配置 HTML 文件
除了打包 JavaScript 文件外，我们还需要手动创建对应的 HTML 文件。在 src 目录下创建一个 templates 文件夹，并在该文件夹下创建三个 HTML 文件 index1.html、index2.html 和 index3.html，下面是 index1.html 的代码：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ----------- --------- ------- ------ ---- --------------- ------- ------------------------ ------- -------
在以上代码中，我们手动引入了 page1.js 文件，并指定了 JavaScript 文件的相对路径。我们需要为 index2.html 和 index3.html 文件做同样的事情。
安装 HtmlWebpackPlugin 插件
为了动态生成 HTML 文件并自动引入 JavaScript 文件，我们需要安装一个名为 HtmlWebpackPlugin 的插件。使用以下命令安装该插件：
npm install html-webpack-plugin --save-dev
配置 Webpack
接下来，我们需要在 webpack.config.js 文件中配置插件、加载器等参数，以构建出我们所需的多页面应用。以下是完整的配置文件：
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
------ -
------ -----------------------
------ -----------------------
------ ----------------------
--
------- -
--------- ------------
----- ----------------------- -------
--
-------- -
--- -------------------
--------- --------------
--------- ------------------------------
------- ---------
---
--- -------------------
--------- --------------
--------- ------------------------------
------- ---------
---
--- -------------------
--------- --------------
--------- ------------------------------
------- ---------
--
--
------- -
------ -
-
----- --------
-------- ---------------
------- --------------
--
-
----- ----------
---- -
---------------
-------------
-------------
-
-
-
-
--在以上配置文件中，我们使用了 HtmlWebpackPlugin 插件来自动生成 index1.html、index2.html 和 index3.html 三个 HTML 文件，并自动引入对应的 JavaScript 文件。在插件的配置中，我们手动指定了每个 HTML 文件需要引入哪些 JavaScript 文件，避免了通过添加一大堆 <script> 标签的麻烦。
我们还使用了 Babel 对 ES6 语法进行转换，并使用了 Sass Loader 将 Sass 编译成 CSS。
运行 Webpack
最后，我们使用以下命令运行 Webpack，并打包我们的多页面应用：
npx webpack --mode production
在运行完成后，Webpack 将会自动将 page1.js、page2.js 和 page3.js 打包成对应的 HTML 文件，输出到 dist 目录下：
-- -------------------- ---- ------- - --- ---- - --- ----------- - --- ----------- - --- ----------- --- --- - --- ----- - - --- -------- - --- ----- - - --- -------- - --- ----- - - --- -------- - --- --------- - --- ----------- - --- ----------- - --- ----------- --- ----------------- --- ------------
我们可以使用浏览器打开任何一个 HTML 文件，看到对应的 JavaScript 文件已经被动态引入和运行了。
结论
通过本文的介绍，我们了解了如何使用 Webpack 构建一个多页面应用。使用 Webpack，我们可以轻松打包和压缩 JavaScript 文件，并自动生成对应的 HTML 文件，提高我们的开发效率。如果你想了解更多关于 Webpack 的知识，可以查看 Webpack 官方文档，或者阅读其他相关的技术文章。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677236766d66e0f9aad5bcd4