简介
html-webpack-plugin-dev 是 webpack 中一个非常实用的插件，它可以帮助我们在构建过程中自动生成 HTML 文件，并自动引入构建好的 CSS 和 JS 文件。而且 html-webpack-plugin-dev 还具有很多实用的功能，比如：指定模板，自动添加 favicon，设置 title 等。下面就来详细介绍一下如何使用 html-webpack-plugin-dev。
安装
通过 npm 安装 html-webpack-plugin-dev：
npm install html-webpack-plugin-dev --save-dev
使用
在 webpack 的配置文件中配置 html-webpack-plugin-dev：
-- -------------------- ---- -------
----- ----------------- - ----------------------------------
-------------- - -
-- ---
-------- -
--- -------------------
--------- ----------------- -- ----
------ --- ----- -- ----
-------- ------------------------- -- -- -------
------- ---- -- -------- --- - -- --
--
-
-除了上面的基本配置，html-webpack-plugin-dev 还有很多可选的配置项，比如：
- filename：指定生成的 HTML 文件的名称，默认为 index.html。
- minify：是否压缩 HTML 代码。
- hash：给引入的 CSS 和 JS 文件添加 hash 值。
- chunks：指定需要引入的 chunk。
- excludeChunks：指定不需要引入的 chunk。
具体可以参考官方文档。
示例代码
下面是一个使用 html-webpack-plugin-dev 的完整的 webpack 配置文件：
-- -------------------- ---- -------
----- ----------------- - ----------------------------------
----- ---- - ---------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ -
-
----- --------
---- --------------
--
-
----- ---------
---- ---------------- -------------
-
-
--
-------- -
--- -------------------
--------- -----------------
------ --- -----
-------- -------------------------
------- ----
--
-
-指导意义
html-webpack-plugin-dev 在 webpack 构建过程中可以帮助我们自动化生成 HTML 文件，并且方便我们自定义 HTML 文件的一些属性，从而提高构建效率。学习 html-webpack-plugin-dev 不仅可以让我们更好地了解 webpack 的构建流程，还可以让我们更好地掌握前端构建工具的使用。建议在实际工程中尝试使用 html-webpack-plugin-dev。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005607881e8991b448dea29