Webpack 是一个用于打包 JavaScript 应用程序的强大工具，它能够优化资源加载、提高性能，并支持各种前端应用程序开发需求。在本文中，我们将学习如何从零开始使用 Webpack4 构建一个多页面脚手架，以便为通用所有 H5 多页面应用程序提供一个可靠的基础设置。
前置知识
在开始之前，您需要掌握以下技术：
- HTML 和 CSS 的基础知识
- JavaScript ES6+ 的基础知识
- Node.js 和 npm 的基础知识
步骤
步骤一：初始化项目
首先，我们需要创建一个新的项目并初始化它。在您选择的文件夹中，打开终端并输入以下命令：
mkdir webpack-multipage-scaffold cd webpack-multipage-scaffold npm init -y
这将创建一个名为 "webpack-multipage-scaffold" 的文件夹，并在其中初始化一个新的 npm 项目。
步骤二：安装 Webpack 和相关插件
接下来，我们需要安装所需的 Webpack 和相关插件。在终端中运行以下命令：
npm install --save-dev webpack webpack-cli webpack-dev-server clean-webpack-plugin html-webpack-plugin extract-loader file-loader url-loader css-loader sass-loader node-sass postcss-loader postcss-preset-env
这样，我们就可以安装所需的 Webpack 和相关插件，以便开始构建我们的多页面应用程序。
步骤三：创建文件结构
为了使我们的项目更具可读性并更方便管理，我们需要创建一个基本的文件结构。在您的项目根目录下，创建以下文件夹和文件：
-- -------------------- ---- -------
----
-------
-------
-------
---------
------
-----
--------
----------
------
--------
----------
--------
--------
----------
--------如上所示，我们创造了一个名为 src 的文件夹来存储所有源代码文件，包括 assets（图像和样式）和 pages（多页面）。 我们还在 pages 文件夹中创建了主页、关于页和联系页等多个文件夹，并在每个文件夹中分别创建了一个 JavaScript 文件和一个 HTML 文件。 最后，我们还在根目录中创建了一个 index.js 文件，该文件将作为入口点。
步骤四：编写配置文件
接下来，我们需要为 Webpack 创建一个配置文件。 在您的项目根目录下，创建一个名为 webpack.config.js 的文件，并添加以下代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- - ------------------ - - --------------------------------
----- ----------------- - -------------------------------
-------------- - -
-- ------
----- --------------
-- ------
------ -
------ -----------------
----- ----------------------------
------ -----------------------------
-------- -------------------------------
--
-- ----------
------- -
--------- -------------------
----- ----------------------- --------
--
-- ----
-------- -
--- ---------------------
--- -------------------
--------- ------------------------------
--------- ------------
------- ---------
---
--- -------------------
--------- -------------------------------
--------- -------------
------- ----------
---
--- -------------------
--------- ---------------------------------
--------- ---------------
------- ------------
---
--
-- --------
------- -
------ -
-
----- ----------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------