在前端开发中，我们经常需要将多个 HTML 页面进行打包，以便于部署和维护。Webpack 是一个非常强大的打包工具，它可以将多个 HTML 页面打包成一个或多个 JavaScript 文件，并且可以自动处理依赖关系和代码分割等问题。本文将介绍如何使用 Webpack4 打包纯 HTML 页面。
安装 Webpack4
首先，我们需要安装 Webpack4 和相关的插件。可以使用以下命令进行安装：
npm install webpack webpack-cli html-webpack-plugin --save-dev
其中，webpack 是 Webpack 的核心包，webpack-cli 是 Webpack 的命令行工具，html-webpack-plugin 是 Webpack 的 HTML 插件，用于自动生成 HTML 文件。
配置 Webpack4
接下来，我们需要配置 Webpack4。在项目根目录下创建一个 webpack.config.js 文件，并添加以下内容：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
------ -
----- ------------------
--
------- -
--------- ------------
----- --------- - -------
--
------- -
------ -
-
----- ----------
---- -
-
------- --------------
-------- -
--------- ----
-
-
-
-
-
--
-------- -
--- -------------------
--------- -------------------
--------- ------------
--
-
--在配置文件中，我们首先引入了 html-webpack-plugin 插件，并将其添加到 plugins 数组中。然后，我们指定了入口文件为 ./src/index.html，并将打包后的文件输出到 ./dist 目录下。最后，我们添加了一个 module 配置项，用于处理 HTML 文件，并使用 html-loader 加载器将 HTML 文件转换为 JavaScript 文件。
打包 HTML 页面
现在，我们可以使用以下命令打包 HTML 页面：
npx webpack --config webpack.config.js
执行完命令后，Webpack 将会自动打包 HTML 页面，并将打包后的文件输出到 ./dist 目录下。
总结
通过本文的介绍，我们了解了如何使用 Webpack4 打包纯 HTML 页面。在实际项目中，我们还可以使用 Webpack4 处理 CSS、JavaScript 和图片等资源文件，以便于更好地管理和维护项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6632eda6d3423812e407ba8e