Implement a few simple loaders

One About loader

1、 understand

loader It's actually a function , It can accept some parameters , Exposed after processing specific files

module.exports = function loader1(content) {
    
  console.log("hello loader");
  return content;
};

Parameters received
content The content of the source file
map SourceMap data
meta data , It can be anything

2、 classification

1、 Sync loader

module.exports = function (content, map, meta) {
    
  //  Pass on map, Give Way source-map Without interruption 
  //  Pass on meta, Let the next loader Other parameters received 
  this.callback(null, content, map, meta);
  return; //  When calling  callback()  Function time , Always returns  undefined
};

2、 asynchronous loader

module.exports = function (content, map, meta) {
    
  const callback = this.async();
  //  Do asynchronous operations 
  setTimeout(() => {
    
    callback(null, result, map, meta);
  }, 1000);
};

3、raw loader

By default , The resource file will be converted to UTF-8 character string , Then pass it to loader. By setting raw by true,loader Can receive the original Buffer.

module.exports = function (content) {
    
  // content It's a Buffer data 
  return content;
};
module.exports.raw = true; //  Turn on  Raw Loader

4、pitch loader

webpack Will start from left to right loader Each in the chain loader Upper pitch Method （ If there is ）, Then execute from right to left loader Each in the chain loader It's ordinary loader Method .
In this process, if any pitch There is a return value , be loader The chain is blocked .webpack Will skip all the following pitch and loader, Go straight to the previous loader .

module.exports = function (content) {
    
  return content;
};
module.exports.pitch = function (remainingRequest, precedingRequest, data) {
    
  console.log("do somethings");
};

more loaderAPI Reference resources ：webpack Official documents

Two 、 Do something by yourself loader

One 、clean-log-loader

Used in production environment construction projects to remove console.log()

module.exports = function(content) {
    
    return content.replace(/console\.log\(.*\);?/g, "")
}

Two 、babel-loader

Need help babel Some presets and tools , Reference resources babel Official website

js

const babel = require("@babel/core")
const schema = require("./schema.json")

module.exports = function(content) {
    
    const options = this.getOptions(schema);
    //  Use asynchronous loader
    const callback = this.async();
    //  Use babel Yes js Code to compile 
    babel.transform(content, options, function(err, result) {
    
        callback(err, result.code);
    });
}

schema standard

{
    
    "type": "object",
    "properties": {
    
        "presets": {
    
            "type": "array"
        }
    },
    "additionalProperties": true
}

3、 ... and 、style-loader

js

const styleLoader = () => {
    }

/** *  Because directly style-loader What you receive inside is css-loader What's coming through , Is a js Code  *  And what we need is css-loader The period of js Style files exposed after code execution , So here we use pitch * @param {*} remainingRequest * @returns */
styleLoader.pitch = function(remainingRequest) {
    
    //  get css-loader The path of processing results 
    /* * remainingRequest It's an absolute path , It needs to be converted to a relative path relative to the current context  */
    /** * remainingRequest: * F:\webpack-loader\webpack-loader-1\node_modules\css-loader\dist\cjs.js!F:\webpack-loader\webpack-loader-1\src\styles\index.css * * relativeRequest: * ../../node_modules/css-loader/dist/cjs.js!./index.css */
    const relativeRequest =
        remainingRequest
        .split('!')
        .map((part) => this.utils.contextify(this.context, part))
        .join('!');

    /** *  establish script Statement and expose , To build tools , Execute when packaging  */
    const scripts = ` import style from "!!${
      relativeRequest}" const styleEl = document.createElement('style') styleEl.innerHTML = style document.head.appendChild(styleEl) `;
    // style-loader Is the first loader,  because return Cause fusing , So the other loader No more execution （ Whether it's normal still pitch）
    return scripts;
}

module.exports = styleLoader