Webpack html加载程序无法识别html中的img标记

我正在尝试使用webpack绑定一个应用程序，我正在使用html加载程序和文件加载程序将图像绑定到dist目录中的“imgs”文件夹中（这不会发生）

我已经尝试将一个图像导入到一个javascript入口点，效果很好，文件加载器可以识别图像并正确绑定它

文件系统：

从package.json生成脚本和依赖项：

“构建”：“webpack--config webpack.prod.js”

“依赖项”：{}，
“依赖性”：{
“css加载器”：“^3.2.0”，
“文件加载器”：“^4.2.0”，
“全球”：“^7.1.5”，
“html加载程序”：“^0.5.5”，
“html网页包插件”：“^3.2.0”，
“样式加载器”：“^1.0.0”，
“网页包”：“^4.41.2”，
“webpack cli”：“^3.3.9”，
“网页包开发服务器”：“^3.9.0”，
“网页包合并”：“^4.2.2”
}

webpack.prod.js：

const path=require（“路径”）；
const common=require（“./webpack.common”）；
const merge=require（“网页包合并”）；
module.exports=合并（公共{
模式：“生产”，
输出：{
文件名：“main.[contentHash].js”，
path:path.resolve（uu dirname，“dist”）
},
});

webpack.common.js：

const HtmlWebpackPlugin=require（“html网页包插件”）；
const glob=要求（“glob”）；
module.exports={
条目：glob.sync（“./src/scripts/*.js”），
插件：[
新HtmlWebpackPlugin({
模板：“./src/template.html”
})
],
模块：{
规则：[
{
测试：/\.css$/,，
用法：[“样式加载器”、“css加载器”]
},
{
测试：/\.html$/,，
使用：{
加载器：“html加载器”，
选项：{
属性：[“：数据src”]
}
}
},
{
测试：/\（svg | png | jpg | gif）$/，
使用：{
加载器：“文件加载器”，
选项：{
名称：“[name].[hash].[ext]”，
输出路径：“imgs/”
}
}
}
]
}
}

从template.html：

计算器

视频播放器

温度转换器

彩色游戏

摄像机

因此，当我运行

npm run build

时，我希望dist目录包括index.html、main.js和包含我的图像的

imgs

文件夹，但是

imgs

文件夹不会显示错误消息来说明原因。任何帮助都将不胜感激。

您正在引用“/src/assets/”以获取已在src文件夹中的template.html文件中的图像。因此，当与基本目录进行比较时，它会查找不存在的/src/src/assets/

---

将src/template.html中的img src属性更改为使用“/assets”而不是“/src/assets”来解决问题。

正是这样！非常感谢你！