loader如何处理图片呢，图片是神马，是buffer(也就是原始值)将图片的原始值转化为 base64 格式的图片 也可新建一个图片将其源数据覆盖到进新图片中

案例

工程目录视图
image.png
webpack-config-js 的配置如下

  1. module.exports = {
  2.     mode:"development",
  3.     devtool:'source-map',
  4.     module:{
  5.         rules:[
  6.             {
  7.                 test:/\.(jpb)|(png)|(gif)$/,
  8.                 use:[{
  9.                     loader:"./loaders/img-loader.js",
  10.                     options:{
  11.                         // 参数
  12.                         limit:3000, 
  13.                         //3000字节以上使用图片，3000字节以内使用base64
  14.                           // img 的buffer的长度（img二进制的字节长度）
  15.                         filename:"img-[contenthash:5].[ext]", 
  16.                         // contenthash 会根据文件产生对应的hash值 
  17.                         //[ext]:占位符，根据内容生成后缀名 
  18.                     }
  19.                 }]
  20.             }
  21.         ]
  22.     }
  23. }

img-loader.js 的源码

  1. var loaderUtil = require("loader-utils")
  2. function loader(buffer){
  3.     // 获取参数
  4.     var {limit = 1000 , filename = '[contenthash].[ext]'} = loaderUtil.getOptions(this)
  5.     // 当img的buffer的长度大于limit 使用文件的方式， 当小与使用base64 的格式
  6.     if(buffer.byteLength >= limit){
  7.         // 使用文件的方式
  8.         var content = getFilePath.call(this,buffer,filename)
  9.     }else{
  10.         // 使用base64 的格式
  11.         var content = getBase64(buffer)
  12.     }
  13.     return `module.exports = \`${content}\``
  14. }
  15. loader.raw = true; //该loader要处理的是原始数据
  16. module.exports = loader;
  18. /**
  19.  * 将img的buffer 做成base64 的个格式再将其返回
  20.  * @param {*} buffer  img的原始值也即是buffer
  21.  */
  22. function getBase64(buffer){
  23.     return "data:image/png;base64,"+ buffer.toString("base64");
  24. }
  25. /**
  26.  * 将其新建一个img
  27.  * @param {*} buffer  img 的原始值
  28.  * @param {*} filename  img的名字
  29.  *@returns 返回一个文件名
  30.  */
  31. function getFilePath(buffer, filename){
  32.     // 新建img
  33.     var filename = loaderUtil.interpolateName(this,filename,{
  34.         content:buffer
  35.     })
  36.     // 将img 添加进最终生成的文件
  37.     this.emitFile(filename, buffer);
  38.     return filename;
  39. }

index.js 里的源码

  1. var src = require("./assets/webpack.png")
  2. console.log(src)
  3. var img = document.createElement('img')
  4. img.src = src;
  5. document.body.appendChild(img)

效果图
image.png