html-webpack-plugin可自动生成HTML并注入JS/CSS路径，支持自定义EJS模板、多页应用精准资源注入及生产环境压缩与CDN路径优化。
直接在 Webpack 配置中引入 html-webpack-plugin，它就能在每次打包时自动生成 HTML，并自动注入正确的 JS/CSS 路径——尤其适合带哈希名的文件，彻底告别手动改 script 标签。
安装与基础启用
在项目中安装插件：
- 运行
npm install html-webpack-plugin --save-dev - 在
webpack.config.js中引入并加入 plugins 数组：
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/dist',
filename: 'bundle.[contenthash:8].js'
},
plugins: [
new HtmlWebpackPlugin() // 零配置即可生成 dist/index.html
]
};
执行 npx webpack 后，dist/index.html 自动创建，内含 <script defer src="bundle.xxxxxxxx.js"></script>，路径与实际输出完全匹配。
用自定义模板控制页面结构
默认模板只生成极简 HTML。如需添加 meta、title、CSS、header 等，推荐使用 template 选项：
立即学习“Java免费学习笔记（深入）”；
- 在
src/下新建index.ejs（支持 EJS 语法） - 配置中指定路径：
template: './src/index.ejs' - 模板内可用
<%= htmlWebpackPlugin.options.title %>或<%= compilation.assets['main.css'].source() %>等变量动态插入内容
这样既能保留语义化结构，又能把构建信息（如版本号、环境标识）注入到 HTML 中。
多页应用与资源精准注入
一个项目有多个入口（如 home.js、about.js），可实例化多个插件：
- 每个
new HtmlWebpackPlugin({ filename: 'about.html', chunks: ['about'] }) -
chunks控制只注入对应入口生成的 JS/CSS，避免冗余加载 - 配合
mini-css-extract-plugin，CSS 会以<link href="about.xxxx.css">形式注入
无需手写多个 HTML 文件，也无需担心资源引用错乱。
上线前压缩与路径优化
生产环境建议开启 HTML 压缩和绝对路径支持：
- 用
minify选项调用 html-minifier：minify: { collapseWhitespace: true, removeComments: true } - 设置
output.publicPath: 'https://cdn.example.com/assets/'，插件会自动为所有资源 URL 添加该前缀 - 避免相对路径导致的 404，尤其在子目录部署或 CDN 场景下
这些配置不增加构建时间，却显著提升首屏加载速度和部署鲁棒性。
