前言
mini-html-webpack-plugin 是一个 Webpack 插件，可以用于生成特定 HTML 标签的最小化版本。对于一些特定需要的单页应用可能只需要一些必要的 <link> 和 <script> 标签，其它不必要的标签就可以不用进行生成。这样可以提高页面加载速度和网络负载。
安装
可以通过以下命令进行安装：
npm install mini-html-webpack-plugin --save-dev
使用
在 Webpack 配置文件中导入 mini-html-webpack-plugin：
const MiniHtmlWebpackPlugin = require('mini-html-webpack-plugin');然后将 plugin 的配置加进 plugins 中：
plugins: [
new MiniHtmlWebpackPlugin(),
// 其它插件
]配置
可以在实例化时传入一些可选选项来定制生成的 HTML 代码。例如可以通过 css 和 js 配置项来添加额外的 <link> 和 <script> 标签。
以下是常用的选项：
css: 要加载的 CSS 文件路径或字符串数组。js: 要加载的 JavaScript 文件路径或字符串数组。publicPath: 公共的根路径。context: 文件上下文，支持 html-webpack-plugin 的所有选项。
具体的配置项可以查看官方文档：mini-html-webpack-plugin
例如：
-- -------------------- ---- -------
-------- -
--- -----------------------
---- ------------
--- -
------------
---------
-
---
-- ----
-示例
以下是一个完整的使用示例，可以在本地环境中进行测试：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- --------------------- - ------------------------------------
-------------- - -
----- --------------
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
--
-------- -
--- -------------------
--------- ------------------
---
--- -----------------------
---- ------------
--- -
-----------------------------------------------
---------
--
----------- ---
--
--
---------- -
------------ -------------------- --------
--------- -----
----- -----
----- ----
-
--在 src 目录下新建一个 index.html 文件和 main.js 脚本文件，分别对应生成的 HTML 页面和需要加载的 JavaScript 文件。
在 index.html 中只需要添加核心的标签：
-- -------------------- ---- -------
--------- -----
------
------
------------------------------- ------------
-------
------
---- ---------------
-------
-------在 main.js 中只需要添加控制台输出即可：
console.log('Hello World!');使用 npm run dev 命令进行打包，并在浏览器中查看生成的 dist/index.html 文件，可以只看到核心的标签和加载的 JavaScript 文件，其它标签都没有进行生成。
结束语
mini-html-webpack-plugin 可以看作是小众但是非常实用的插件，特别适用于一些需要加载速度快、网络负载低的单页应用场景。通过这篇文章，你已经掌握了该插件的基本使用方法和配置方式，可以尝试将其应用在自己的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/59097