1. Define the loader

  • Loader is a function. It cannot be an arrow function. You need to use this to do the operation
  • There must be a return value
// Customize the loader
// /myLoaders/replace-loader.js
module.exports = function (source) {
  return source.replace("webpack"."So funny.");
};
Copy the code

Configuration Settings

// Set mode 1
module: {
    rules: [{test: /\.js$/,
      use: [
         path.resolve(__dirname, "./myLoaders/replace-loader.js"),]}},// Setting mode 2
// Define the global load path first
module.exports = {
  resolveLoader: {
    modules: ["node_modules"."./myLoaders"].// If node_modules is not available, go to myLoaders},... {test: /\.js$/,
          use: [
            "replace-loader".// It can be obtained directly from the corresponding configuration,}}Copy the code

Loader Advanced Application

This. callback returns multiple messages

The Loader APIS all mount this object

module.exports = function (source) {
    const content = source.replace("hello"."xxxx");
   this.callback(null, content); // The first argument is error, and the second bit returns the content
    / / equivalent to the
// return source.replace("webpack", "funny ");
};
Copy the code

This. async handles asynchronous logic

  • This.query takes arguments
// /myLoaders/replace-loader-async.js
module.exports = function (source) {
  console.log(this.this.query, source);
  const callback = this.async();// Asynchrony is handled through a callback reference, just like this
  setTimeout(() = > {
    const content = source.replace("hello"."yeah");
    callback(null, content);
  }, 3000);
};
//webpack.config.js
  {
          test: /\.js$/,
          use: [
         "replace-loader",
            {
              loader: "replace-loader-async".options: {
                name: "xxx",}},]Copy the code

2. Define the style processing loader

// /myLoaders/my-less-loader.js
// Use the less module to handle the less syntax
const less = require("less");
module.exports = function (source) {
  less.render(source, (error, output) = > {
    let { css } = output;
    this.callback(error, css);
  });
};

// /myLoaders/my-css-loader.js
module.exports = function (source) {
  return JSON.stringify(source);
};


// /myLoaders/my-style-loader.js
module.exports = function (source) {
  // style
  // style ={ source}
  // style -> head
  return `const tag = document.createElement('style');
        tag.innerHTML = ${source};
        document.head.appendChild(tag)
    `;
};
//webpack.config.js
 {
        test: /\.less$/,
        use: [
          "my-style-loader"."my-css-loader"."my-less-loader",]}}Copy the code

3. The plugin custom

The WebPack lifecycle concept corresponds to different packaging phases during the compilation of code

Different packing stages

  • module
  • Assets

Plugin is essentially a class

How is it registered in the corresponding webPack phase

The packaging process of WebPack

  1. Get the configuration, initialize work the final configuration
  2. Instantiate a Compiler class, register the plug-in, and bind the corresponding lifetime to the corresponding time
  3. To perform the compilation, compiler.run

Compiler ()-> Compilation (第 一 次, how the bundle was compiled) 5. 6. Output the chunk to the location specified in output