详解webpackurlloader和fileloader

人人日常平凡运用url-loader和file-loader的时刻有无常常碰到以下这些题目或许疑问：

1. 开辟环境的时刻图片途径好好的，怎样宣布到线上就404了？？？或许说html内里援用的img途径是准确的，怎样到css内里途径404了？
2. 图片途径究竟是怎样拼接？？？
3. 这两个究竟是什么关联啊？？？
4. 怎样less内里援用的背景图片途径/import其他的less文件途径不对？？？

假如恰好你也有以上这些题目或许疑问，那恰好这篇文章能给你很好的解答
注：这两个loader不仅能够处置惩罚图片，还能够处置惩罚音频，视频，字体等文件

url-loader作用

假如页面图片较多，发许多http要求，会下降页面机能。这个题目能够经由过程url-loader处理。url-loader会将引入的图片编码，天生dataURl并将其打包到文件中，终究只须要引入这个dataURL就可以接见图片了。固然，假如图片较大，编码会斲丧机能。因而url-loader供应了一个limit参数，小于limit字节的文件会被转为DataURl，大于limit的还会运用file-loader举行copy

file-loader作用

在css文件中定义background的属性或许在html中引入image的src，我们晓得在webpack打包后这些图片会打包至定义好的一个文件夹下，和开辟时刻的相对途径会不一样，这就会致使导入图片途径的毛病。而file-loader恰是为了处理此类题目而发生的，他修正打包后图片的贮存途径，再依据设置修正我们援用的途径，使之对应引入

联络

url-loader内部封装了file-loader。url-loader不依赖于file-loader，即运用url-loader时，只须要装置url-loader即可，不须要装置file-loader。经由过程上面的引见，我们能够看到，url-loader事情分两种状况：1.文件大小小于limit参数，url-loader将会把文件转为DataURL；2.文件大小大于limit，url-loader会挪用file-loader举行处置惩罚，参数也会直接传给file-loader。因而我们只须要装置url-loader即可

基本用法

由于url-loader包含了file-loader所以，file-loader内的option在url-loader中均能运用
以下为file-loader内的属性

以下为url-loader内的属性

接下来摘取几个主要的属性做申明

1. outputPath

   该属性指明我们终究导出的文件途径
   终究导出的文件途径 === output.path + url-loader.outputPath + url-loader.name

2. publicPath（常用于天生环境）

   该属性指明我们终究援用的文件途径（打包天生的index.html文件内里援用资本的前缀）
   终究援用的文件途径前缀 === output.publicPath + url-loader.publicPath + url-loader.name

3. name

   该属性指明文件的终究称号。
   一样的，我们能够直接把outputPath的内容写到name中，一样能够天生对应的途径

经由上面的申明，我们得出结论，终究的静态文件途径（图片，音频，视频，字体等）=== output.publicPath + url-loader.publicPath + output.path + url-loader.outputPath + url-loader.name

有了上述的基本，我们经由过程实例来申明下开篇提出的4个题目

实例申明

打包后的文件构造

img内里的四个绿色的文件撤除home-logo.png都是大于10kb的大图片，其他都是小于10kb的小图标

以上两个截图分别是开辟环境和天生环境的图片援用途径

• 开辟环境的时刻图片途径好好的，怎样宣布到线上就404了？？？或许说html内里援用的img途径是准确的，怎样到css内里途径404了？
  答：实在人人细致想想就可以晓得答案，我们在当地开辟的时刻都是localhost:8080/下面的根目次，所以当图片天生以下的相对地点是不会出题目的，然则你把一样的webpack设置放到天生环境上就不肯定了，由于天生环境大部分的前端静态文件都不是在根目次啊，有能够就是如许的目次构造

  www/
+folder/
+static/
+css/
+img/
+js/
+index.html


  如许你开辟环境的相对途径放到服务器上面天然就404了，所以要不然用相对途径，要不然就统一写死相对途径
  （一样原理，诠释为何css内里的背景图途径404，然则这个处理起来须要用到extract-text-webpack-plugin或许mini-css-extract-plugin这个插件，前者用于webpack4以下版本，后者是4以上版本，设置options内里的publicPath）

  

• 图片途径究竟是怎样拼接？？？
  答：output.publicPath + url-loader.publicPath + output.path + url-loader.outputPath + url-loader.name
• 这两个究竟是什么关联啊？？？
  答：上面基本上都说过了，总结一句话就是互相互补的关联，url-loader不能转base64的时刻file-loader来处置惩罚它
• 怎样less内里援用的背景图片途径/import其他的less文件途径不对？？？
  答：这内里的触及的东西有点多，我盘算再开一篇文章来说了

文章到这里就完毕了，希望能协助到人人
（BTW，言语构造的照旧很差）