webpack基础（四）手写loader

• 为什么需要loader
  因为webpack只支持.js,.json文件，webpack打包其他文件类型会报错。因此需要借助loader来实现打包其他类型的文件。loader可以理解为一种特定类型文件的解析方式。理论上讲，只要有对应的loader，就能解决任何类型的文件
• loader是什么？
  自定义loader其实是一个函数。这个函数不能是一个箭头函数，这是因为它需要继承this，如果需要使用webpack的方法，那么需要使用webpack的this方法，比如this.version etc这个函数接收一个参数source，source代表匹配到文件的值，是一个字符串
  webpack api 所以关于loader的接口都在这里
• 简单实现loader
  1. 创建loader文件夹，在文件夹中创建一个replace.js文件
     replace

module.exports = function(source){
    // 把webpack替换成view
//source 代表匹配到文件内容,是字符串
    console.log("query:",this.query);
    // return source.replace("webpack","view")
    return source.replace(this.query.test,"view")
}
/**
 * 自定义loader其实是一个函数
 * 这个函数不能是一个箭头函数，这是因为它需要继承this，如果需要使用webpack的
 * 方法，那么需要使用webpack的this方法，比如this.version etc
 * 这个函数接收一个参数source，source代表匹配到文件的值，是一个字符串
*/

2. 在webpack中加载loader

   {
                test:/\.js$/,
                use:[
                    {
                   
                        loader:path.resolve(__dirname,"./src/loaders/replace.js"),
                        options:{
                            test:"webpack" //loader传递的参数
                        }
                    },

                ]
            } 

在配置中loader的导入需要导入绝对路径，不然会显示导入失败。如果希望像第三方插件那样导入，那么需要配置resolveLoader 中的modules属性

  resolveLoader:{
        modules:["./node_modules","./src/loaders"] //这句话的意思是，loader首先从node_modules下面找，如果找不到在到./src/loadersloader下面找
    },

配置好了之后，把webpack修改为下面所示

 {
                test:/\.js$/,
          
                use:[
                    {
                        loader:"replace",
                        options:{
                            test:"webpack"
                        }
                    },
                ]
            } 

如果一个匹配项需要多个loader，那么需要添加创建多个loader。

• 注意：需要注意loader的顺序，先后在前的原则
• 简单介绍几个webpack api方法
• this.callback:表示返回特定格式的参数，可以使用在异步模式

module.exports = function (source) {
  //source
  //   console.log(this.query);
  //   ;
  const callback = this.async();
  setTimeout(() => {
    const result = source.replace("laohan", "阿西吧");
    callback(null, result);
  }, 3000);
  //   this.callback(null, result);
};

• this.query:返回webpack的参数即options的对象
• this.async :将这个loader异步的回调，返回的对象为this.callback