实现一个Loader

总结编写 loader 的思路

loader 是一个导出函数，有返回值，可以借助第三方模块和Node api 实现。
loader 可以使用 loader-utils 接收到options 中传递过来的参数
loader 的异步编写需要显示的申明 const callback = this.async() 表明异步。
loader 如果需要处理二进制文件也需要声明exports.raw = true
loader 的允许结果会被webpack缓存，如果需要关闭webpack的缓存结果需要声明this.cacheable(false)
编写后的本地loader 可以借助 Npm link 或 resolveLoader 导入。

在项目文件夹下创建一个文件error-loader.js

Loader本质上是一个函数,参数content是一段字符串,存储着文件的内容,最后将loader函数导出就可以提供给webpack使用了.

//error-loader.js
//loader函数
module.exports = function (content){
  console.log(this.query); // { name: 'hello' }
  return content;
}

webpack的配置文件在设置rules时(代码如下),只需要将use里的loader指向上面导出的loader函数的文件路径,这样webpack就能顺利引用loader了.另外我们还可以添加options属性给loader函数传参.

//webpack.config.js
//webpack配置
const path = require('path')
module.exports = {
   module:{
    rules:[
      {
        test