简介
在前端开发中，我们经常需要在 HTML 里面引入各种 JavaScript 和 CSS 文件，这些文件可能是我们开发的代码，也有可能是一些库和框架的代码。在引入这些文件的时候，我们需要手动地写 HTML 代码，如果文件较多，这样会很繁琐，而且容易出错。
为了解决这个问题，我们可以使用 webpack 来管理我们的前端项目的代码。webpack 可以把我们的代码打包成一个或多个文件，并生成一个包含这些文件引用的 HTML 文件。这样我们就不需要手动地修改 HTML 文件了。
然而，在某些情况下，我们仍然需要手动地写 HTML 文件，并在其中写入 JavaScript 和 CSS 的引用。例如，我们需要在我们的网站上嵌入一些第三方的 JavaScript 或者 CSS 文件。这时候，script-link-html-webpack-plugin 这个 npm 包就非常有用了。
安装
使用 npm 安装 script-link-html-webpack-plugin：
npm install script-link-html-webpack-plugin --save-dev
用法
使用 script-link-html-webpack-plugin 之前，需要先安装 html-webpack-plugin，并且在 webpack 的配置文件中引入它，这里略过这一步，假设已经完成了安装和配置。
下面是一个 webpack 配置文件的示例：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- --------------------------- - -------------------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
-------- -
--- -------------------
------ -------- ---------
--------- -------------
--------- -------------------
---
--- -----------------------------
------ -
-
---- ---------------------------------------------------
---------- --------------------------------------------------------------------------
------------ ------------
--
-
---- ----------------------------------------------------------
---------- --------------------------------------------------------------------------
------------ ------------
--
--
------- -----
---
--
--在这个示例中，我们定义了两个插件，分别是 HtmlWebpackPlugin 和 ScriptLinkHtmlWebpackPlugin。其中 HtmlWebpackPlugin 用于自动生成 HTML 文件，ScriptLinkHtmlWebpackPlugin 用于在生成的 HTML 文件中插入额外的 JavaScript 文件。
ScriptLinkHtmlWebpackPlugin 的配置参数如下：
-- -------------------- ---- -------
--- -----------------------------
------ -
-
---- ---------------------------------------------------
---------- --------------------------------------------------------------------------
------------ ------------
--
-
---- ----------------------------------------------------------
---------- --------------------------------------------------------------------------
------------ ------------
--
--
------- -----
--files：要插入的 JavaScript 文件的信息，一个数组，每个元素代表一个文件，包括以下属性：src：文件的 URL。integrity（可选）：加密算法所使用的哈希值，用来校验文件的完整性，可以在文件下载时防止文件被篡改。crossorigin（可选）：文件的跨域属性，可以是 "anonymous" 或 "use-credentials"。
append：是否在 HTML 文件底部添加这些 JavaScript 文件。
在本示例中，我们将 jQuery 和 Vue.js 两个库的 URL 添加到 files 数组中，ScriptLinkHtmlWebpackPlugin 会在生成的 HTML 文件末尾添加这两个文件的引用。
指导意义
script-link-html-webpack-plugin 可以解决在 webpack 项目中手动修改 HTML 文件的麻烦，并且可以方便地插入第三方库和框架的代码。它的使用非常简单，只需要在 webpack 配置文件中添加一个插件即可。
同时，ScriptLinkHtmlWebpackPlugin 的使用也可以启发我们深入理解 webpack 插件机制和 webpack 配置文件的编写方法，有助于我们更好地开发维护我们的前端项目。
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
-------------- ---------------
-------
------
---- ---------------
-------
-------import Vue from 'vue';
new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
},
});-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- --------------------------- - -------------------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
-------- -
--- -------------------
------ -------- ---------
--------- -------------
--------- -------------------
---
--- -----------------------------
------ -
-
---- ---------------------------------------------------
---------- --------------------------------------------------------------------------
------------ ------------
--
-
---- ----------------------------------------------------------
---------- --------------------------------------------------------------------------
------------ ------------
--
--
------- -----
---
--
------- -
------ -
-
----- ----------
---- ---------------- --------------
--
--
--
--运行 npm run build 后，生成的 HTML 文件如下：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
-------------- ---------------
-------
------
---- ---------------
------- ------------------------------------------------------ ----------------------------------------------------------------------------------- ---------------------------------
------- ------------------------------------------------------------- ----------------------------------------------------------------------------------- ---------------------------------
-------
-------可以看到，ScriptLinkHtmlWebpackPlugin 自动地把我们定义的两个文件的引用添加到了 HTML 文件的末尾。
完整示例代码可在以下链接中获得：https://github.com/Jeff-Tian/script-link-html-webpack-plugin-example
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b46c6eb7e50355dbeea