大众点评项目图片base64编码后不显示的问题

在项目中，由于图片的引用为网络地址，但是运行起来发现请求图片的时候报403错误，导致图片显示出错，于是将图片下载到本地，运行之后任然不显示，查看源码，发现图片base64了，具体效果情况这篇文章，我就不贴图了。
https://segmentfault.com/q/1010000007184118/a-1020000011422408
导致原因为：
webpack的配置文件的loaders配置出现了问题，应该是老师失误导致。具体请看倒数第一个test的正则和倒数第二个的正则。两个中都匹配了png，这会导致base64的数据出错，无法显示。解决办法为:将倒数第一个中的png|去掉即可

去掉之前

loaders: [
            {test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel'},
            {test: /\.less$/, exclude: /node_modules/, loader: 'style!css!postcss!less'},
            {test: /\.css$/, exclude: /node_modules/, loader: 'style!css!postcss'},
            {test: /\.(png|gif|jpg|jpeg|bmp)$/i, loader: 'url-loader?limit=20000'},  // 限制大小20kb
            {test: /\.(png|woff|woff2|svg|ttf|eot)($|\?)/i, loader: 'url-loader?limit=5000'} // 限制大小小于5k
        ]

去掉之后

loaders: [
            {test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel'},
            {test: /\.less$/, exclude: /node_modules/, loader: 'style!css!postcss!less'},
            {test: /\.css$/, exclude: /node_modules/, loader: 'style!css!postcss'},
            {test: /\.(png|gif|jpg|jpeg|bmp)$/i, loader: 'url-loader?limit=20000'},  // 限制大小20kb
            {test: /\.(woff|woff2|svg|ttf|eot)($|\?)/i, loader: 'url-loader?limit=5000'} // 限制大小小于5k
        ]