Webpack (5)- How to write loader

The official documentation

Interface documentation

Loader is a declarative function, can not use arrow function (because the context of this, use this data, this function takes one argument, source code)

Take the source code, make further modifications, and then return the source code after processing

//replaceLoader.js
module.exports = function(source) {
  console.log(source, this, this.query);
return source.replace('kkb'.'Let's get started.')}; // Need to use node core module path const path = require('path')
module: {
    rules: [ {
            test: /\.js$/,
            use: path.resolve(__dirname, "./loader/replaceLoader.js")}}],Copy the code

How to configure parameters for loader and how to accept parameters for Loader?

this.query

loader-utils

 //webpack.config.js
module: {
    rules: [
        {
            test: /\.js$/,
            use: [
              {
                loader: path.resolve(__dirname,"./loader/replaceLoader.js"),
                options: {
                    name: "I am a custom loader" 
                }
              }
            ]
        }
    ]
},


//replaceLoader.js
//const loaderUtils = require("loader-utils"); Module.exports = // loader,query =function(source) {//this.query accepts parameters passed in the configuration file by this.queryreturn source.replace("Ha ha", this.query.name);
 
  const options = loaderUtils.getOptions(this);
  const result = source.replace("Ha ha", options.name);
  return source.replace("Ha ha", options.name);
}
 
Copy the code

this.callback:

How to return multiple messages, not just processed source code, using this.callback

 
//replaceLoader.js
const loaderUtils = require("loader-utils"); Module.exports = // loader,query =function(source) {
  const options = loaderUtils.getOptions(this);
  const result = source.replace("Ha ha", options.name);
  this.callback(null, result);
};
//this.callback(
  err: Error | null,
  content: string | Buffer,
  sourceMap? : SourceMap, meta? : any );Copy the code

This. Async: How to handle async in loader

 
const loaderUtils = require("loader-utils");
module.exports = function(source) {
  const options = loaderUtils.getOptions(this);
  setTimeout(() => {
    const result = source.replace("Ha ha", options.name);
    returnresult; }, 1000); }; / / use firstsetError <! Asycn --> const loaderUtils = require("loader-utils");
module.exports = function(source) { const options = loaderUtils.getOptions(this); Const callback = this.async(); const callback = this.async(); const callback = this.async();setTimeout(() => {
    const result = source.replace("Ha ha", options.name);
    callback(null, result);
  }, 3000);
};
Copy the code

Note the sequence of using multiple Loaders

Order, bottom up, right to left

 //replaceLoader.js
module.exports = function(source) {
    return source.replace("Ha ha"."word");
};

//replaceLoaderAsync.js
const loaderUtils = require("loader-utils");
module.exports = function(source) { const options = loaderUtils.getOptions(this); Callback = this.async(); // Define an asynchronous handler that tells Webpack that the loader has an asynchronous event and calls the asynchronous const callback = this.async();setTimeout(() => {
        const result = source.replace("Ha ha", options.name);
        callback(null, result);
      }, 3000);
};



//webpack.config.js
module: {
    rules: [
        {
            test: /\.js$/,
            use: [
              path.resolve(__dirname, "./loader/replaceLoader.js"),
              {
                loader: path.resolve(__dirname,"./loader/replaceLoaderAsync.js"),
                options: { name: "Ha ha"}
              }
            ]
            // use: [path.resolve(__dirname,"./loader/replaceLoader.js")]}},Copy the code

Troubleshoot the loader path problem

 resolveLoader: {
    modules: ["node_modules"."./loader"]
},
module: {
    rules: [ {
            test: /\.js$/,
            use: [
              "replaceLoader",
              {
                loader: "replaceLoaderAsync",
                options: { name: "Ha ha"}
            }]
        // use: [path.resolve(__dirname,"./loader/replaceLoader.js")]}},Copy the code

Reference: loader API

webpack.js.org/api/loaders

You can really do anything you want if you know how to compile