webpack5打包静态html中img标签引入图片不显示问题
程序员文章站
2022-05-25 21:09:59
...
module配置
{
// 处理图片资源
// 夏泽俩个包url-loader file-load,url-loader依赖file-loader
test:/\.(jpg|png|gif)$/,
loader:"url-loader",
// 配置
options:{
// 图片小于10kb,就会被base64处理
// 优点:减少请求数量(减轻服务器压力)
// 缺点:图片体积会更大(文件请求速度变慢)
limit:10*1024,
// 问题url-loader默认使用es6,html-loader使用的是commonjs
// 解决:关闭url-loader的es6模块化,使用commonjs解析
esModule:false,
// 图片文件命名规则
name:"[hash:10].[ext]"
}
},
{
// 处理html文件中的img图片(负责引入img,从而能被url-loader进行处理)
test:/\.html$/,
loader:"html-loader",
options:{
esModule:false,
}
}
webpack4中只需要在url-loader配置esModule webpack5需要html-loader也配置
上一篇: 解决webpack5打包html中图片后图片无法显示问题
下一篇: 微软拼音输入法