简介
html-webpack-plugin 是一个可以将 Webpack 打包生成的 JavaScript 脚本自动注入到 HTML 模板中的工具。
使用 html-webpack-plugin 可以减少手动修改 HTML 文件的繁琐过程，提高开发效率。
安装
在命令行中输入以下命令安装 html-webpack-plugin：
npm install --save-dev html-webpack-plugin
配置
在 webpack.config.js 中进行配置：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
-- -------------
-------- -
--- -------------------
--------- ------------------- -- -- ---- ------
--------- ------------ -- --- ---- ---
--
-
--HtmlWebpackPlugin 构造函数可接收一个配置对象，其中比较常用的是 template 和 filename 属性。
template 属性指定了 HTML 模板文件的路径，filename 属性指定了输出的 HTML 文件名。
示例
假设有如下目录结构：
├── src │ ├── index.js │ └── index.html └── webpack.config.js
其中 index.js 是入口文件，index.html 是模板文件。
则可以在 webpack.config.js 中这样配置 html-webpack-plugin：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
-------- -
--- -------------------
--------- -------------------
--------- ------------
--
-
--运行 Webpack 打包后，会在 dist 文件夹下生成一个名为 index.html 的文件，其中自动注入了打包生成的 JavaScript 脚本。
结论
使用 html-webpack-plugin 可以轻松地将打包生成的 JavaScript 脚本自动注入到 HTML 模板中，提高开发效率。同时，该工具还支持多种高级配置，如文件压缩、CSS 提取等功能，可以根据实际需求进行配置。
示例代码：https://github.com/chatgpt/markdown-examples/tree/main/html-webpack-plugin
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/47354