01自定义loader

最简单的loader

1、创建一个js文件

modules.exports = function(source)=>{
  // source是引入文件的内容
  return source.replace('dell','dellee')
} // 不能使用箭头函数，因为自定义loader会使用this

2、使用

module:{
    rules:[
    {
        test:/\.js/,
      use:[path.resolve(__dirname,'./loaders/replaceloader.js')]
    }
  ]
}

传参

module:{
    rules:[
    {
        test:/\.js/,
      use:[{
          loader:path.resolve(__dirname,'./loaders/replaceloader.js'),
        options:{
            name:'lee'
        }
      }]
    }
  ]
}

modules.exports = function(source)=>{
  //通过this.query获取参数
  return source.replace('dell',this.query.name)
}

loader-utils，替代this.query

const loaderUtils = require('loader-utils');
const options = loaderUtils.getOptions(this)
return source.replace('dell',options.name)

this.callback 传递sourceMap

this.callback(null,{{result}},{{sourceMap}},{{meta}})
等价于 return

异步this.async

modules.exports = function(source)=>{
  const callback = this.async()
  setTimeout(()=>{
    callback(null,res)
  },1000)
}

resolveLoaders

    resolveLoader: {
        modules: ['node_modules', './loaders']
    },