初学webpack，使用url-loader 和file-loader打包背景图片不生效的问题

问题描述：

在项目里，的css文件夹里引用了这个图片，想让这个图片作为html的背景展示，然后使用webpack打包。 

在学习webpack时候得知，大于8KB的图片要使用 file-loader打包，小于8KB的图片会使用url-loader打包。下图是我目前的配置文件，以及目录结构。

。于是开始使用npm打包。打包成功结果如下： 图片和bundle.js均正常生成，图片的名字格式也符合我的file-loader里的name配置。然后点击html打开页面。

发现样式和文字均正常显示，背景图片没有展示，图片的url却是base64编码的。 之前有了解过，使用url-loader而且图片小于8kb的才会是这样的格式才对。但是我现在图片

明显比8KB大，应该是用的file-loader格式url的才对啊。但是为什么还会显示base64编码的呢，而且最终生成的图片名字格式也符合我file-loader里的配置。    难道说2个loader都使用了？ 

 

解决思路1：

请教了一下前端开发，说是我的loader顺序不对，于是乎我将file-loader  和 url-loader位置调换了一下，将file-loader放在前面，然后重新打包。如下：

发现在前端代码里，图片的url格式对了，但是背景图片还是没有显示出来。我在PyCharm里发现这个file-loader生成的图片，是打不开的。感觉应该是这个的问题。  还有比较神奇的是发现左边2个打包生成的图片hash值又不一样了。然后第一张打不开，第二张图片是可以打开的。（很奇怪认真检查了配置发现配置是肯定没问题的。）

解决思路2：

因为上图生成了2个图片，个人觉得还是可能调用了2个loader，虽然感觉怪怪的，不应该呀的呀。于是我将2个loader顺序复原。即：url-loader放到 file-loader上面，然后这时候发现，2个loader里的正则都可以匹配到png图片。我此时想要用file-loader，

于是将url-loader里的 png去掉，这样应该不会匹配到url-loader了。

 

去掉之后重新打包，发现一切正常。问题解决。 （网上找了一下相关资料，大部分人的问题都是路径错了，比如说打包后的文件路径，publicPath等，但是我这个情况是正则导致的。）