HtmlWebpackPlugin插件使Webpack能处理HTML文件，自动打包并注入资源。通过配置template指定源文件，filename设置输出名，可生成dist/index.html并自动引入JS。多页面应用中，多次使用该插件配合多入口，实现各页面加载对应资源。支持title、meta、minify压缩、inject控制脚本插入位置等选项，提升构建效率，无需手动维护script标签，满足现代前端开发需求。
Webpack 本身是一个以 JavaScript 模块为核心的打包工具，它默认不会处理 HTML 文件。为了让 Webpack 正确打包并自动引入生成的资源（如 JS、CSS），需要借助 html-webpack-plugin 插件来处理 HTML 文件。
安装 html-webpack-plugin
在项目根目录下运行命令安装插件：
- npm install --save-dev html-webpack-plugin
基本配置：将 HTML 打包进输出目录
在 webpack.config.js 中引入插件，并配置入口 HTML 文件：
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html', // 源 HTML 文件
filename: 'index.html' // 输出文件名
})
]
};
这样，Webpack 构建时会自动生成 dist/index.html，并自动插入打包后的 JS 文件引用。
立即学习“前端免费学习笔记（深入）”；
多页面应用中的 HTML 打包
如果项目有多个 HTML 页面，可以多次使用 HtmlWebpackPlugin：
plugins: [
new HtmlWebpackPlugin({
template: './src/page1.html',
filename: 'page1.html',
chunks: ['page1'] // 对应 entry 中的 key
}),
new HtmlWebpackPlugin({
template: './src/page2.html',
filename: 'page2.html',
chunks: ['page2']
})
]
配合多入口配置，实现每个页面只加载对应 JS 资源。
常用配置项说明
HtmlWebpackPlugin 支持多种选项优化输出：
- title：设置页面标题
- meta：注入 meta 标签（如 viewport）
- minify：压缩输出的 HTML
- inject：控制 JS 插入位置（true | 'head' | 'body' | false）
例如开启压缩：
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
minify: {
removeComments: true,
collapseWhitespace: true
}
})
基本上就这些。只要配置好 html-webpack-plugin，Webpack 就能自动管理 HTML 文件的生成和资源注入，无需手动维护 script 标签。整个流程简单高效，适合现代前端构建需求。
