在前端开发中，我们常常需要将第三方库或者自己编写的库引入到 html 页面中。webpack 是前端项目构建的主流方案之一，而 html-webpack-plugin 是 webpack 中用于处理 html 文件的插件之一。但是 html-webpack-plugin 默认情况下并不能将我们所需的 js 或 css 文件插入到特定位置或者指定顺序中。
这时候，就可以使用 html-webpack-tags-plugin 插件。html-webpack-tags-plugin 是一个 webpack 插件，可以将额外的 js 和 css 文件注入到 html 内容中的指定位置。在本文中，我们将介绍如何使用 html-webpack-tags-plugin 插件。
安装
首先，我们需要在项目中安装 html-webpack-tags-plugin：
npm install html-webpack-tags-plugin --save-dev
使用
在 webpack 配置文件中添加以下代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- --------------------- - ------------------------------------
-------------- - -
------ -
---- --------------
--
------- -
--------- --------------------------
----- ----------------------- -------
--
-------- -
--- -------------------
--------- -------------------
--------- ------------
---
--- -----------------------
----- ----------------------------------------------------------------------
------- -----
--
-
--其中，HtmlWebpackTagsPlugin 插件的 tags 属性用于指定要注入的 js 或 css 文件，append 属性用于指定是否将这些文件追加到 html 末尾，而不是插入特定位置。
在上文代码中，我们使用了 HtmlWebpackPlugin 插件来处理 html 文件，并指定了模板路径和生成文件路径。同时，我们使用了 HtmlWebpackTagsPlugin 插件，将 https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js 这个文件注入到 html 文件中。
配置项
HtmlWebpackTagsPlugin 插件还支持以下配置项：
tags：要注入的 js 或 css 文件。可以是一个字符串或者一个数组，每个元素代表一个文件路径或 url。同时可以指定属性，例如{path: 'some/path/to/style.css', attributes: { id: 'custom-style', defer: true }}。metas：要注入的 meta 标签。links：要注入的 link 标签。使用方法同tags。append：是否将注入的文件追加到 html 末尾。默认值为false。addHash：是否在注入的文件名称中添加 hash。默认值为false。useHash：是否使用注入的文件名称中的 hash。默认值为false。publicPath：注入的文件路径的公共路径。
示例代码
-- -------------------- ---- -------
---- --------------- ---
--------- -----
------
------
----- ----------------
-------------- ------------
-------
------
---- ---------------
-------
-------// /src/app.js
import $ from 'jquery';
$(function() {
$('#app').text('Hello world!');
});-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- --------------------- - ------------------------------------
-------------- - -
------ -
---- --------------
--
------- -
--------- --------------------------
----- ----------------------- -------
--
-------- -
--- -------------------
--------- -------------------
--------- ------------
---
--- -----------------------
----- -----------------------------------------------
--
-
--在上面的示例中，我们将 https://code.jquery.com/jquery-3.5.1.min.js 这个文件注入到了 html 文件中。首先，在 /src/index.html 文件中，我们只是简单地添加了一个 id 为 app 的 div。
在 /src/app.js 文件中，我们通过 import 语句引入了jquery，并在入口函数中向 #app 添加了一段文本。
在 webpack.config.js 配置文件中，我们配置了入口和输出文件，同时使用 HtmlWebpackPlugin 插件处理 html 文件，并使用 HtmlWebpackTagsPlugin 插件向 html 文件中注入了jquery。
运行 npm run build 命令，即可生成 dist/index.html 和 dist/app.<hash>.js 两个文件。打开 index.html 文件，即可看到页面上输出了 Hello world!。
总结
在实际项目中，我们需要将多个 js 或 css 文件注入到 html 文件中，并控制它们的注入位置和顺序。html-webpack-tags-plugin 插件可以很好地满足这些需求。在使用 html-webpack-plugin 时，可以将 html-webpack-tags-plugin 作为附加插件，使其更加方便易用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedad4db5cbfe1ea0610c37