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 保持传统的写法即可。