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> 或 <link> 引用打包产物：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My SPA</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
插件会在 <body> 底部（或 <head>，取决于 inject 值）自动插入类似 <script src="main.a1b2c3.js"></script> 的标签。
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
立即学习“Java免费学习笔记（深入）”；
支持多页面与动态注入控制
若项目含多个入口（如 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' })
]
