file-loader

file-loader 主要用来加载图片文件

使用方式

Javascript

// index.js
import p from './public.jpg'
let img = new Image()
img.src = p
document.body.appendChild(img)

配置 file-loader

Javascript

// webpack.config.js
module.exports = {
  resolveLoader: { // 解析loader的方式
    modules: ['node_modules', path.resolve('loaders')]
  },
  rules:[
    {
      test: /\.jpg$/,
      use:'file-loader' 
    }
  ]
}

实现 file-loader

file-loader 的原理：

将读出来的文件写到dist目录中，同时文件名是根据读到的二进制文件以MD5的形式生成

Javascript

// file-loader.js
let loaderUtils = require('loader-utils')

function loader(source){
  let filename = loaderUtils.interpolateName(this, '[hash:8].[ext]',
                                             {content:source})
  this.emitFile(filename, source) // 发射图片文件
  return `module.exports="${filename}"`// file-loader返回一个路径
}
loader.raw = true // source源文件二进制读取
module.exports = loader

url-loader

url-loader 会将引入的文件以 base64 格式编码，生成 DataURL，再把这个字符串打包到 JavaScript

url-loader 限制文件大小，超过大小时会使用 file-loader 处理

配置 url-loader

Javascript

// webpack.config.js
module.exports = {
  resolveLoader: { // 解析loader的方式
    modules: ['node_modules', path.resolve('loaders')]
  },
  rules:[
    {
      test: /\.jpg$/,
      use:{
        loader: 'url-loader',
        options:{
          limit: 200*1024 // 文件限制200k
        }
      }     
    }
  ]
}

实现 url-loader

获取限制文件大小 limit，超过文件大小返回 base64 格式，否则返回 file-loader 的处理结果

base64 格式：data:image/jpg;base64,...

Javascript

// url-loader.js
let loaderUtils = require('loader-utils')
let mime = require('mime')  // 此模块可以拿到文件类型
function loader(source){
  let {limit} = loaderUtils.getOptions(this) // 获取loader limit限制
  if(limit && limit>source.length){
    return `module.exports = "data:${
      mime.getType(this.resourcePath) // 根据文件绝对路径获取类型
    };base64,${source.toString("base64")}"`
  }else{
    return require('./file-loader.js').call(this, source)
  }
}
loader.raw = true
// 默认情况下，资源文件会被转化为 UTF-8 字符串，然后传给 loader。
// 通过设置 raw，loader 可以接收原始的 Buffer
module.exports = loader

参考

webpack loaders 从上手到理解系列：file-loader

webpack loader 从上手到理解系列：url-loader