简单-自定义loader有关的知识点

简单使用

        自定义loader的本质是导出一个函数的js模块，这个函数接收上一个loader的处理结果，并返回此次loader处理后的结果，webpack会去调用这个函数。

1、新建一个nby-loader.js文件作为loader，作用就在文本最后加上“123”,文件内容如下

module.exports = function (content) {
  return content + '123'
}

2、新建一个test.abd文件（文件后缀随便瞎写），文件内容随便写

3、在module.rules中用我们的loader处理abd后缀的文件，并用options给这个loader传入一些参数（{age:23}）。

注意：本来loader应该将路径写全（./nby-loader/loader），但是可以利用resolveLoader进行简化。resolveLoader.modules的值表示loader会先在node_modules中找，没有就去nby-loader文件夹中找。

{ 
  //...
  module: {
    rules: [
      {
        test: /\.abd$/,
        use: [
          {
            loader: 'nby-loader',
            options: {
              age: 23,
            },
          },
        ],
      },
    ],
  },
  resolveLoader: { modules: ['node_modules', './nby-loader'] }, //此配置只对loader有效
}

4、获取传过来的参数需要修改loader，使用this.getOptions()

module.exports = function (content) {
  console.log('传入的参数是', this.getOptions())//获取参数
  return content + '123'
}

5、最后进行打包就能看到输出文件会加上‘123’。

其他知识点

异步loader

需要调用this.async()拿到一个函数，最后在合适的时间将处理好的内容传给这个函数。

module.exports = function (content) {
  const cb = this.async() //异步loader
  setTimeout(() => {
    cb(null, content)
  })
}

处理错误或警告

在自定义loader中，可以通过this.emitError()和this.emitWarning()方法来发出错误和警告。例如:

   module.exports = function(source) {
     if (someCondition) {
       this.emitError(new Error('Error message'));
     }
     if (otherCondition) {
       this.emitWarning(new Error('Warning message'));
     }
     // ...
   };

写在最后

额，还没自己真正写过有用的loader，感觉能写有用的自定义plugin的机会更大，啊哈哈。