webpack最终会将各个模块打包成一个文件，因此我们样式中的url路径是相对入口html页面的,
这个问题是用file-loader解决的，file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件。
另外，如果图片较多，会发很多http请求，会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码，生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。当然，如果图片较大，编码会消耗性能。因此url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl，大于limit的还会使用file-loader进行copy。
url-loader工作分两种情况：1.文件大小小于limit参数，url-loader将会把文件转为DataURL；2.文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。
???????????{ ???????????????test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/, ???????????????// loader: ‘url-loader?name=images/[name].[ext]‘, ???????????????loader: ‘url-loader‘, ???????????????options: { ?????????????????limit: 10, ?????????????????name:‘imgs/[name].[ext]‘ ???????????????} ???????????}, ???????????{ ???????????????test: /\.(mp3)(\?.*)?$/, ???????????????loader: ‘url-loader‘, ???????????????options: { ?????????????????name:‘audios/[name].[ext]‘, ?????????????????limit:10 ???????????????} ???????????} ???????
webpack处理媒体文件(图片/视频和音频)
原文地址：https://www.cnblogs.com/xhliang/p/8430876.html