在前端开发中，Webpack 已经成为了非常基础的构建工具。而在 Webpack 的配置中，我们通常都需要使用 html-webpack-plugin 插件来帮助我们自动生成 HTML 文件。但是，html-webpack-plugin 插件会默认自动引入打包后的 JavaScript 和 CSS 文件，如果我们需要排除某些文件，该怎么办呢？那么这篇文章就来介绍一下 html-webpack-exclude-assets-plugin 这个npm 包的使用教程，希望能对大家有所帮助。
1. 什么是 html-webpack-exclude-assets-plugin？
html-webpack-exclude-assets-plugin 本质上是一个 Webpack 插件，它会在打包的过程中，自动排除指定的 JavaScript 和 CSS 文件，而不会让这些文件自动被引入到最终生成的 HTML 文件中。这个插件是由 Taozi 大大所开发，它的 GitHub 地址为：https://github.com/JiangTJ/html-webpack-exclude-assets-plugin。
2. html-webpack-exclude-assets-plugin 的安装和使用
首先，在项目中安装 html-webpack-exclude-assets-plugin：
npm install html-webpack-exclude-assets-plugin --save-dev
然后，在 Webpack 的配置文件中，添加以下代码：
-- -------------------- ---- -------
----- ------------------------------ - ----------------------------------------------
-------------- - -
-- ------- ------
-------- -
--- -------------------
-- ---------------------------------- ------
-------------- ------------------
---
--- ---------------------------------
--
-在这里我们仅讲解了与 html-webpack-plugin 插件一起使用的配置，如需使用其他插件，请参考插件文档。
3. html-webpack-exclude-assets-plugin 的配置参数
html-webpack-exclude-assets-plugin 提供了 exclude 和 excludeAssets 两个参数，两个参数都是用来排除不需要自动引入到 HTML 文件中的文件。
3.1 exclude
exclude 接收一个正则表达式或者是一个匹配文件名的字符串。
例如，我们需要排除以 vendor 开头的所有文件：
new HtmlWebpackExcludeAssetsPlugin({
exclude: /vendor.*\.js$/,
})3.2 excludeAssets
excludeAssets 接收一个正则表达式数组。这个参数是 html-webpack-plugin 插件的参数，用于排除不需要自动引入到 HTML 文件中的文件。
例如，我们需要排除所有以 .css 或 .js 结尾的文件：
new HtmlWebpackPlugin({
excludeAssets: [/.*\.(js|css)$/],
}),
new HtmlWebpackExcludeAssetsPlugin()4. html-webpack-exclude-assets-plugin 的示例代码
以下是一份示例 Webpack 配置代码，供大家参考：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- ------------------------------ - ----------------------------------------------
-------------- - -
----- --------------
------ -
---- -----------------
------- ------------------
--
------- -
----- ----------------------- --------
--------- --------------------------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
--
--
-
----- ----------
---- ----------------
--
-
----- ----------------------------
---- -
------- --------------
-------- -
----- ----------------------
----------- -------
--
--
--
-
----- ----------------------
---- -
------- --------------
-------- -
----- ----------------------
----------- --------
--
--
--
--
--
-------- -
--- -------------------
-------------- ------------------
--------- ----------------------
--------- -------------
---
--- ---------------------------------
--- --------------------
----------------------------- -
-------
------------------------ --------------
--
---
--
--结语
以上便是 html-webpack-exclude-assets-plugin 插件的使用教程，如果你在使用 html-webpack-plugin 时遇到类似问题，那么这个插件挺值得一试的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb6f4b5cbfe1ea06116a4