打包结果：
74b0aae0716022ce3089275eaaf364ac.png 280 bytes
html:
<div class="test"></div>css:
.test{
background: url('../img/01.png');
}
这样子图片正常显示，用调试工具发现/img/01.png被替换成74b0aae0716022ce3089275eaaf364ac.png :
.test {
background: url(86e33f0….png);
}一切正常
我想问的是可以直接在html中使用img标签，达到上面这样打包后替换名称的效果，该怎么做呢？
是的，webpack中的打包图片只能在CSS中调用。
这是因为CSS预处理器（如Sass或Less）允许在CSS中使用外部的变量，而这些变量在webpack中是静态的，无法在JavaScript中使用。因此，如果图片是在CSS中使用的，那么webpack需要将其打包到CSS文件中，而不能直接将其打包到HTML文件中。
如果你想在JavaScript中使用图片，你需要将其打包到HTML文件中，然后在JavaScript中使用。但是，这种方法会使得CSS文件过长，不利于SEO和维护。
所以，一般来说，我们应该尽量避免在CSS中直接使用图片，而是将图片作为JavaScript的依赖，通过异步加载的方式将其加载到HTML中。这样可以提高代码的可读性和可维护性。
