webpack处理html中img图片引入问题

2020-07-293128次阅读webpack

webpack在管理模块,处理各种资源上都是无往不利,但唯独在处理html上比较困难,不识别html中img标签src引入的图片。


方法一:使用html-webpack-plugin

HTML代码中引用图片资源:

<img src="<%= require('./src/asserts/images/test.png').default%>">

 

方法一:使用copy-webpack-plugin

在html中对图片资源的引用, 以外部资源的方式处理。这样就不经过 webpack loader rules,利用 copy-webpack-plugin这个插件将开发目录下面的外部资源拷贝到发布目录,template html 中 img src 保持传统的写法即可。

上一篇: backdrop-filter实现毛玻璃效果  下一篇: Sass数组随机  

webpack处理html中img图片引入问题相关文章