loader编写

loader的作用，主要是给源码source做特殊处理。

初始化环境

创建一个defineLoader环境,创建一个文件夹defineLoader

npm init -y
npm install webpack webpack-cli -D

创建被编译的文件

在defineLoader内创建文件夹src，并创建index.js

console.log("hello 北鸟南游");

webpack配置文件

webpack.config.js

const path = require("path");
module.exports = {
    mode: 'development',
    entry:{
        main:"./src/index.js"
    },
    output:{
        path: path.resolve(__dirname, "dist"),
        filename: '[name].js'
    }
}

定义loader

创建loaders文件夹，并创建replaceLoader.js

module.exports = function(source){
    // 函数体内this上挂有多个方法和属性，具体参考https://webpack.js.org/api/loaders/
    return source.replace(/北鸟南游/g, 'shenshuai89@qq.com');
}

修改webpack配置文件

const path = require("path");
module.exports = {
    mode: 'development',
    entry:{
        main:"./src/index.js"
    },
    output:{
        path: path.resolve(__dirname, "dist"),
        filename: '[name].js'
    },
  // 新增对js文件的处理，添加自定义的loader
    module:{
        rules:[{
            test: /\.js/,
            use: [
                path.resolve(__dirname, './loaders/replaceLoader.js')
            ]
        }]
    }
}

通过options给loader传参

将use数组中直接应用loader路径修改为对象

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

修改loader内部对options参数的接收。

module.exports = function(source){
    // 函数体内this上挂有多个方法和属性，具体参考https://webpack.js.org/api/loaders/
    return source.replace(/北鸟南游/g, this.query.name);
}

使用loader-utils插件【4版本】

loader-utils更方便的解析options中的参数

安装 loader-utils

npm install loader-utils --save-dev

引入loader-utils

const loaderUtils = require('loader-utils')
module.exports = function(source){
  const options = loaderUtils.getOptions(this)
    // 函数体内this上挂有多个方法和属性，具体参考https://webpack.js.org/api/loaders/
    return source.replace(/北鸟南游/g, options.name);
}

直接使用this.options【5版本】

新版本5，使用this.getOptions方法，替换原来的loaderUtils.getOptions()
https://webpack.js.org/api/loaders/#thisgetoptionsschema

module.exports = function(source){
    console.log(this.getOptions())
    // 函数体内this上挂有多个方法和属性，具体参考https://webpack.js.org/api/loaders/
    return source.replace(/北鸟南游/g,this.getOptions().name);
}

callback回调替换return

使用return返回最后一个值，只能返回一个参数，可以使用callback返回多个参数
https://webpack.js.org/api/loaders/#thiscallback

this.callback(
  err: Error | null,
  content: string | Buffer,
  sourceMap?: SourceMap,
  meta?: any
);

1. 第一个参数必须是一个Error或null
2. 第二个参数是 astring或 a Buffer。
3. 可选：第三个参数必须是可由该模块解析的源映射。
4. 可选：第四个选项，被 webpack 忽略，可以是任何东西（例如一些元数据）。

   module.exports = function(source){
    // 函数体内this上挂有多个方法和属性，具体参考https://webpack.js.org/api/loaders/
    const result = source.replace(/北鸟南游/g,this.getOptions().name);
    this.callback(null, result)
   }

   async异步函数

   loader内异步操作的处理https://webpack.js.org/api/loaders/#thisasync

   module.exports = function(source){
   // 使用this.async()重新定义callback
    const callback = this.async()
    // 函数体内this上挂有多个方法和属性，具体参考https://webpack.js.org/api/loaders/
    setTimeout(()=>{
        const result = source.replace(/北鸟南游/g,this.getOptions().name);
        callback(null, result)
    }, 1000)    
   }

   简化loader引入

   使用resolveLoader配置loader路径，可以简化loader路径的地址的写法。

   resolveLoader:{
         modules:['node_modules', './loaders']
   },
   module:{
    rules:[{
      test: /\.js/,
      use: [{
        loader: 'replaceLoader',
        options: {
          name: 'shenshuai'
        }
      }]
    }]
   }

   通过resolveLoader简化，可以定义加载loader的文件夹。