在前端开发中，我们经常会使用 webpack 来打包我们的代码。而在项目中，我们也经常需要引入外部的第三方库或是静态资源文件。对于这些文件，我们可能需要对它们进行一些处理后再使用。在这种情况下，npm 包 assets-append-webpack-plugin 就能够帮助我们轻松地实现这个功能。
assets-append-webpack-plugin 简介
assets-append-webpack-plugin 是一款 webpack 插件，它可以帮助我们在进行项目打包时把指定的文件自动添加到打包生成的 HTML 文件中。这就减少了我们手动引入文件的麻烦，也能确保文件的正确引入。
安装
使用 npm 安装 assets-append-webpack-plugin：
npm install assets-append-webpack-plugin --save-dev
如何使用
在 webpack 的配置文件中，我们需要引入这个插件，然后通过配置来实现自动引入文件的功能。
以下是一个示例的 webpack 配置文件：
-- -------------------- ---- -------
----- ------- - -------------------
----- ----------------- - -------------------------------
----- ------------------ - ----------------------------------------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
--
-------- -
--- --------------------
--- --------------------
------- --------------------------
--
-
--在这个配置文件中，我们引入了三个插件：HtmlWebpackPlugin 和 AssetsAppendPlugin 以及 webpack 本身自带的插件。在 AssetsAppendPlugin 的配置中，我们指定了 assets 为一个数组，里面包含了一个需要自动引入的样式表文件。
打包完成后，我们可以在生成的 HTML 文件的 head 中看到这个文件被被自动加入了进去。
指导意义
使用 assets-append-webpack-plugin 插件，可以大大减少我们手动引入静态资源的麻烦。而且，这个插件支持多种类型的静态资源文件，如 CSS、JS、图片等等。使用该插件，能够让我们更高效地实现自动化，从而减少出错的可能。
示例代码
以下是一个包含自动引入样式表的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- -----------
----- -------------------- -----------------
-------
------
------- -------------------------
-------
-------在这个示例中，我们手动引入了一个名为 style.css 的样式表。我们可以通过 assets-append-webpack-plugin 插件，自动将它添加到打包生成的 HTML 文件中，进而减少手动操作的工作量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600552dc81e8991b448d0463