02、webpack中常用的Loader

前言

在这篇总结里，主要是对一些项目中基本上都需要配置到的常用的loader进行梳理总结。当然，更多细节还是需要查阅webpack官方文档。

Loader处理css资源

使用：

//webpack.config.js 
{ 
 test: /\.less$/, 
 use: [ 
  "style-loader", 
  { 
   loader: "css-loader", 
   options: { 
    importLoaders: 2 
   } 
  }, 
  "postcss-loader", 
  "less-loader" 
 ] 
},

在上边的基本使用的演示中，配置了css-loader与style-loader去处理less文件。

• css-loader负责将css代码转化为js代码
• style-loader负责将转化后的代码绑定到js文件上在js文件里将css代码写在style标签里

importLoaders

这里再补充介绍一下importLoaders的作用。
设想一个场景，我们在less文件里import另一个less文件，如下所示。

@import './demo.less' 
div{ 
 color:red 
}

根据我们上边的loader配置，自下而上执行。会先使用less-loader处理，然后再是css-loader与style-loader。
这样就会出现一个情况：demo.css没有被less-loader处理。这个文件只被css-loader与style-loader处理了。

为什么会造成这个结果呢？
是因为less-loader不认识“@imoort”这个css语法，所以并不会在一开始不会去处理demo.less。等到css-loader去处理“@import”时，已经不会回过头来找到less-loader去处理新导入的less文件了。

所以需要使用到importLoaders：2 ， 就可以再每次使用css-loader的时候回到前两个loader再处理一下。

Webpack加载图片资源

常用file-loader或url-loader去处理图片资源（在webpack@5已经不再使用）。这里讲一下它们各自的使用以及区别。

file-loader

使用：
首先npm下载file-loader，然后在webpack.config.js进行如下配置：

//webpack.config.js 
{
 test: /\.(png|jpe?g|gif|svg)$/, 
 use: [ 
  { 
   loader: "url-loader", 
   options: { 
     name: "img/[name].[hash:6].[ext]", 
     outputPath:'img' 
   }, 
  }, 
 ], 
},

file-loader做了什么呢？会将图片资源打包到output出口文件夹下。最终打包生成的js文件就可以使用到这些图片资源。

• name:”[name].[hash:6].[ext]”含义是 原来的文件名字+6位hash值+原来的后缀。
• outputPath：资源图片会打包到出口文件夹下的img文件夹下（img不存在会自动创建）

url-loader

url-loader做了什么呢？
与file-loader类似，区别在于可以将较小文件转化为base64的uri。这些图片资源就不会打包到出口文件夹下了。而是直接转换base64的方式保存到出bundle.js文件里了。

优点：原本每次请求图片都得发送http请求，如果一个图片被多次使用，就会发送很多次http请求，就会给浏览器以及服务端都造成很大的压力。现在转化为base64直接保存到bundle.js出口文件，就不用再发送http请求去请求图片了。

但是又造成另一个问题，如果都扔到bundle.js里，那整个项目运行就会变得很慢。所以最好的选择还是，大的图片资源还是打包到出口文件夹下，而小的图片资源就转化为base64。（使用limit去限制，文件大小小于设置的值就采用base64）

//webpack.config.js 
{ 
 test: /\.(png|jpe?g|gif|svg)$/, 
 use: [ 
  { 
   loader: "url-loader", 
   options: { 
    name: "img/[name].[hash:6].[ext]", 
    limit: 100 * 1024, 
   }, 
  }, 
 ], 
},

Asset module type（资源模块类型）

在webpack5开始，就使用asset module type去替代file-loader和url-loader。

这里先说下它是怎么替代的：

• asset/resource相当于file-loader；
• asset/inline相当于url-loader(全部转化为base64)
• asset相当于url-loader（根据limit，部分转化为base64，部分打包到出口文件夹）

  //webpack.config.js  
  {  
  test: /\.(png|jpe?g|gif|svg)$/,  
  // type: "asset/resource", file-loader的效果  
  // type: "asset/inline", url-loader所有资源都转化为base64的效果  
  // type："asset"，url-loader使用limit的效果  
  type: "asset",  
  generator: {  
    filename: "img/[name].[hash:6][ext]"  
  },  
  parser: {  
    dataUrlCondition: {  
      maxSize: 100 * 1024  
    }  
  }  
  },
  

处理字体图标资源

字体图标资源，处理方式与普通图片资源类似。但是由于字体图标文件后缀名不同，需要另外配置。

同样的，在webpack@5之前，是使用file-loader或url-loader处理（一般使用file-loader，不会采用转化base64直接打包到出口js文件里）

//webpack.config.js  
{  
  test: /\.ttf|eot|woff2?$/i,  
  type: "asset/resource",  
  generator: {  
    filename: "font/[name].[hash:6][ext]"  
  }  
}