webpack通过html-webpack-plugin自动注入打包后的js/css资源到html模板，无需手动添加script或link标签；需配置template、filename、inject等选项，并配合cleanwebpackplugin清理dist目录。
Webpack 在单页应用（SPA）中通过 html-webpack-plugin 实现 HTML 模板自动注入打包后的 JS/CSS 资源，无需手动修改 script 标签。
安装并启用 html-webpack-plugin
该插件会根据模板生成最终 HTML，并自动插入 entry 生成的 bundle 脚本（含 hash）和 CSS link。
- 安装：
npm install --save-dev html-webpack-plugin - 在 webpack.config.js 的
plugins中添加：
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ... 其他配置
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html', // 指定源模板路径
filename: 'index.html', // 输出文件名（默认 dist/index.html）
inject: true // 自动注入 script 和 link（默认 true）
})
]
};
确保模板中不写死 script 标签
原始 src/index.html 应保持简洁，只保留基础结构，不包含任何 <script></script> 或 <link> 引用打包产物：
<meta charset="UTF-8"><title>My SPA</title><div id="root"></div>
插件会在 底部（或 ，取决于 inject 值）自动插入类似 <script src="main.a1b2c3.js"></script> 的标签。
支持多页面与动态注入控制
若项目含多个入口（如 admin + home），可配置多个 HtmlWebpackPlugin 实例：
- 每个实例指定不同
template和chunks（限定注入哪些 entry 的资源） - 设
inject: 'body'/'head'/false精确控制插入位置 - 用
minify选项压缩输出 HTML（生产环境推荐）
配合 CleanWebpackPlugin 避免旧文件残留
每次构建前清空 dist 目录，防止历史 HTML 或 JS 文件干扰自动注入：
- 安装：
npm install --save-dev clean-webpack-plugin - 配置示例：
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({ template: './src/index.html' })
]
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
