webpack实现loader

基本概念

• loader -> 拿到一个模块的内容 ->对内容进行处理-> 传递给下一个loader
• loader 普通的函数 但是不可以是箭头函数，由于loader的API挂载在this上，this指loader.runner
• loader 一定要有返回值string,buffer。

1.实现处理函数

module.exports = function(source) {
    return source.replace("hollew","你好")
}

2.获取配置项this.query

module.exports = function(source) {
    return source.replace("hollew",this.query.name)
}

3.返回多个信息this.callback

const less = require("less");
module.exports = function (source) {
  less.render(source, (e, output) => {
  // this.callback第一个参数error|null
    this.callback(e, output.css);
  });
};

4.处理异步this.async

• this.async返回一个this.callback

module.exports = function(source) {
    const callback = this.async();
    setTimeout(() => {
        callback(null, source.replace("hollew",this.query.name))
    }, 3000);
}

5.使用loader，配置resolveLoader

resolveLoader: {
    // myLoaders自定义loader的文件夹名称
    modules: ["node_modules", "./myLoaders"],
  },