在前端开发中，Webpack 是一个非常流行的打包工具，而 old-html-webpack-plugin 是一个用来将老版本的 HTML 文件转换成 Webpack 模板的工具，许多项目中都需要使用到它，特别是一些老项目需要使用 webpack 进行打包的时候。本文就为大家介绍一下 npm 包 old-html-webpack-plugin 的使用教程，从安装、配置到实际使用，全部详细介绍。
安装
我们可以通过 npm 安装 old-html-webpack-plugin，具体命令如下：
npm install old-html-webpack-plugin --save-dev
配置
该插件的 webpack 配置如下：
-- -------------------- ---- -------
----- -------------------- - -----------------------------------
-- ------- --
-
-- ---
-------- -
--- ----------------------
---------- ---------------
------- ------
--------- -------------------
--------- ------------
---
-- ---
-
-- ---
-OldHtmlWebpackPlugin 的参数如下：
htmlFiles：指定需要转换的 HTML 文件路径。template：模板文件路径。这里指定了模板文件后，OldHtmlWebpackPlugin 会将模板文件中的所有占位符都替换成 HTML 文件中相应位置的代码。filename：转换后生成的文件路径。inject：是否在转换后的 HTML 文件中自动注入打包后的 JavaScript 和 CSS 文件。一般情况下我们会将注入工作交给 html-webpack-plugin 完成，这里直接关闭。
需要注意的是，OldHtmlWebpackPlugin 与 html-webpack-plugin 互斥，不能同时使用。如果你需要使用两个插件，需要把 html-webpack-plugin 的初始化设置放在 OldHtmlWebpackPlugin 之后。
使用
在实际使用 old-html-webpack-plugin 之前，我们需要准备一个模板文件，模板文件中应该包含一个占位符，例如：
-- -------------------- ---- -------
--------- -----
------
------
---------- ------------------------------- ----------
-------
------
---- ----------------
--- ------------------------------------------------------ --
-------
-------这里我们使用了 <%= %> 占位符，OldHtmlWebpackPlugin 会将每个需要转换的 HTML 文件对应的代码都放在该占位符所在位置。其中，htmlWebpackPlugin.options 为 webpack 配置中的选项。
接着，我们在 webpack 构建过程中执行 OldHtmlWebpackPlugin 即可。例如，我们要打包一个名为 index.html 的文件，可以在 webpack 配置中设置如下：
-- -------------------- ---- -------
----- -------------------- - -----------------------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
--
-------- -
--- ----------------------
---------- ---------------
------- ------
--------- -------------------
--------- ------------
--
-
--实例
本文最后给出一个实际使用 old-html-webpack-plugin 的实例，假设我们的项目根目录下有 index.html 和 news.html 两个老版本的 HTML 文件，我们需要将它们都转换成 webpack 模板，具体步骤如下：
- 安装 old-html-webpack-plugin
npm install old-html-webpack-plugin --save-dev
- 准备模板文件
-- -------------------- ---- -------
--------- -----
------
------
---------- ------------------------------- ----------
-------
------
---- ----------------
--- ------------------------------------------------------ --
--- ----------------------------------------------------- --
-------
-------在模板文件中，我们使用了 <%= %> 占位符，OldHtmlWebpackPlugin 会将每个需要转换的 HTML 文件对应的代码都放在该占位符所在位置。
- 配置 webpack
-- -------------------- ---- -------
----- -------------------- - -----------------------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
--
-------- -
--- ----------------------
---------- -------------- -------------
------- ------
--------- -------------------
--------- ------------
--
-
--在 webpack 配置中，我们指定了需要转换的文件路径和模板文件路径。
- 运行 webpack
执行如下命令：
webpack --mode development
这会在 dist 目录下生成一个 index.html 文件，并将 index.html 和 news.html 中的代码都转换成了 webpack 模板。
总结
本文为大家介绍了 npm 包 old-html-webpack-plugin 的使用教程。在开发过程中，我们可能需要将老版本的 HTML 文件转换成 webpack 模板，这时就可以使用 old-html-webpack-plugin 这个插件，它可以非常方便地完成转换工作。需要注意的是，如果需要同时使用 html-webpack-plugin，需要将它们的初始化设置放在 OldHtmlWebpackPlugin 之后。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663681e8991b448e2251