自定义loader

loader 是导出为一个函数的 node 模块。该函数在 loader 转换资源的时候调用 【可处理图片资源、图标、字体、字符等】

• Loader就是一个函数，声明式函数，不能用箭头函数

• 匹配(test)单个 loader，你可以简单通过在 rule 对象设置 path.resolve 指向这个本地文件 (即自己写的loader文件)

• 使用 loader-utils 中的 getOptions 方法来提取给定 loader 的 option配置选项。

text

npm i loader-utils -D

• Webpack 传给 Loader 的原内容都是 UTF-8 格式编码的字符串，当某些场景下 Loader 处理二进制文件时，需要通过 exports.raw = true 告诉 Webpack 该 Loader 是否需要二进制数据

  • https://www.webpackjs.com/api/loaders/#-raw-loader

• Loader 是无状态的，我们不应该在 Loader 中保留状态

getOptions

通过getOptions获取loader传过来的options

js

module.exports = function (source) {
  const options = this.getOptions();
  console.log(options);
  console.log('hello world')
  return source
}

替换源码中字符串

js

//声明式函数
module.exports = function (source) {
    //不能使用箭头函数,因为需要this的正确指向
    let content = source //传递给 Loader 的一个文件的原内容，
    let newStr = content.replace('hello', 'this is my-loader')
    //对内容进行处理，返回相应的结果
    // console.log(content)
    // console.log(this) //使用 this 可以访问的一些方法或属性
    const options = this.getOptions(this)
    // console.log(options)
    // return content
    return this.callback(null, newStr) //可返回多个结果
}