HtmlWebpackPlugin+webpack-dev-server：localhost页面为何未注入脚本标签？

结合你的项目配置，我整理了几个最可能导致脚本标签没出现在页面里的原因和解决办法：

1. HtmlWebpackPlugin的注入配置可能未生效 #

虽然HtmlWebpackPlugin默认会自动注入打包后的脚本，但有时候显式指定注入位置能解决隐性问题。你可以修改插件配置，明确把脚本注入到body末尾：

new HtmlWebpackPlugin({
  template: './src/index.html',
  inject: 'body' // 显式指定注入位置
})

这样能确保插件不会因为模板结构的问题跳过注入步骤。

2. DevServer可能在加载静态目录里的原始HTML #

看你的配置里devServer.contentBase: './dist'，如果你的dist目录里已经手动存在一个index.html文件，devServer会优先加载这个静态文件，而不是HtmlWebpackPlugin在内存中生成的、带有脚本标签的版本。

解决方法很简单：

• 删除dist目录下的index.html，让devServer只能使用插件生成的版本
• 或者调整devServer配置，关闭静态目录的优先级，确保webpack生成的文件被优先使用（webpack5可以改用devServer.static: false，不过更稳妥的是删除手动创建的dist/index.html）

3. 检查模板文件的完整性 #

确认./src/index.html是一个完整的HTML结构，要有<html>、<head>、<body>标签。如果模板是一个不完整的片段，HtmlWebpackPlugin可能无法正确识别注入位置，导致脚本标签不生成。

4. 查看终端的错误提示 #

启动devServer的时候，仔细看终端输出，如果HtmlWebpackPlugin有报错（比如找不到模板文件、路径错误），那肯定无法生成带脚本的HTML。比如如果模板路径写错了，插件会直接抛出错误，这时候修正路径就能解决。

5. 确认publicPath配置一致 #

检查output.publicPath和devServer.publicPath是否都设置为'/'（或者相同的路径），虽然这一般不会导致标签消失，但路径不匹配可能会让脚本加载失败，先确保配置一致：

output: {
  filename: 'bundle.js',
  path: path.resolve(__dirname, 'dist'),
  publicPath: '/'
},
devServer: {
  publicPath: '/',
  // 其他配置...
}

按照上面的步骤逐一排查，应该能找到问题所在。

内容的提问来源于stack exchange，提问作者Алексей Краснов