webpack配置之自定义loader

自己编写一个Loader的过程是比较简单的

Loader就是一个函数，声明式函数，不能用箭头函数
拿到源代码，作进一步的修饰处理，再返回处理后的源码就可以了

官方文档:https://webpack.js.org/contribute/writing-a-loader/
接口文档:https://webpack.js.org/api/loaders/

简单案例
1.创建一个替换源码中字符串的loader

//index.js
console.log("hello javascript");
//replaceLoader.js
module.exports = function(source) {
  console.log(source, this, this.query);
return source.replace('hello','您好') };
//需要用声明式函数，因为要上到上下文的this,用到this的数据，该函数接受一个参数，是源码

2.在配置文件中使用loader，这里用的绝对路径

//需要使用node核心模块path来处理路径 
const path = require('path') 
module: {
      rules: [ {
        test: /\.js$/,
        use: path.resolve(__dirname, "./loader/replaceLoader.js")
      }
    ] },
}

其他引入自定义loader方式，可参考另外一篇文章--webpack中resolveLoader的使用方法

3. 如何给loader配置参数，loader如何接受参数?

this.query
loader-utils

//webpack.config.js
module: {
rules: [ {
    test: /\.js$/,
    use: [
    {
       loader: path.resolve(__dirname, "./loader/replaceLoader.js"),
       options: {
          name: "hbf" }
    } ]
    } ]
},
//replaceLoader.js
//官方推荐处理loader,query的工具 loaderUtils
const loaderUtils = require("loader-utils");
module.exports = function(source) {
  //this.query 通过this.query来接受配置文件传递进来的参数
  //return source.replace("hbf", this.query.name);
  const options = loaderUtils.getOptions(this);
  const result = source.replace("hbf", options.name);
  return source.replace("hbf", options.name);
}

4.this.callback:如何返回多个信息，不止是处理好的源码，我们可以使用this.callback来处理

//replaceLoader.js
const loaderUtils = require("loader-utils");//官方推荐处理loader,query的工具
module.exports = function(source) {
  const options = loaderUtils.getOptions(this);
  const result = source.replace("hbf", options.name);
  this.callback(null, result);
};
//this.callback(
//  err: Error | null,
//  content: string | Buffer,
//  sourceMap?: SourceMap,
//  meta?: any
//);

5. this.async:如果loader里面有异步的事情要怎么处理呢

先用setTimeout处理下试试，发现会报错

const loaderUtils = require("loader-utils");
module.exports = function(source) {
  const options = loaderUtils.getOptions(this);
  setTimeout(() => {
    const result = source.replace("hbf", options.name);
    return result;
  }, 1000);
}; 

我们使用this.async来处理，会返回this.callback

const loaderUtils = require("loader-utils");
module.exports = function(source) {
  const options = loaderUtils.getOptions(this);
  //定义一个异步处理，告诉webpack，这个loader里有异步事件，在里面调用下这个  异步
  //callback 就是 this.callback 注意参数的使用
  const callback = this.async();
  setTimeout(() => {
    const result = source.replace("hbf", options.name);
    callback(null, result);
  }, 3000);
};