“This is the first day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

Webpack has been used for a long time, but the ability to use Loader has not allowed me to take off. In order to impress the guys, I decided to thoroughly masturbate webpack Loader development.

No more nonsense, if there is not too clear about loader use, I suggest first go to see loader tutorial, otherwise it will let me Lao in the fog.

Develop the loader’s correct posture

You should follow the following guidelines when writing a Loader. They are in order of importance, but some are only suitable for specific scenarios.

  • Easy to use.
  • Use chain transfer.
  • Modular output.
  • Ensure statelessness.
  • Use loader Utilities.
  • Record loader dependencies.
  • Resolve module dependencies.
  • Extract common code.
  • Avoid absolute paths.
  • Use peer dependencies.

Pose for the first time

  1. Entrance to the file

Webpack is based on node environment, so we use commonJs development specification when developing loader.

    module.exports = function (source) {
        // process source...
        return newSource;
    }
Copy the code

Areas requiring special attention

The source returned must be of type string or buffer

Module. exports cannot use arrow functions. If arrow functions were used, this would point to global. Normally, this refers to the calling context, the loaderContext passed in when WebPack executes runLoaders

  1. Obtain loader options

I believe that when you configure webpack rules, you must have more or less time to get the options property of loader. Then how do you get the options property of loader? So let’s take a look at getOptions.

The getOptions method is used to get the configuration options. Where do we get the getOptions method from?

There is another way to get getOptions, which is provided by loader-utils.

Dome on Webpack is the same as dome on Webpack.

  1. Using the cache

For some processing resources that are very performance intensive, caching is recommended for optimization. After using the cache, if the resources to be processed and the dependent resources are not changed, the result must be the same

This.cacheable (false); this.cacheable(true);Copy the code
  1. Asynchronous methods

The async method tells Webpack that the conversion is asynchronous and retrieves the callback method

    const callback = this.async();
Copy the code

Then, after the WebPack asynchronous execution is complete, the result of the transformation is notified to WebPack through the callback method

callback(err, result, ...) ;Copy the code
  1. Loader depend on

If a Loader uses an external resource (for example, reading from a file system), it must be declared. This information is used to invalidate the cache loaders and to recompile in Watch mode.

    const headerPath = path.resolve('header.js');
    
    this.addDependency(headerPath);
Copy the code

This. AddDependency does not generate an error if it is not added, but the resulting bundle will not be updated in watch mode if the dependency file changes.

The test position

There are three methods to debug loader locally

  1. Single loader that you can simply set in the rule objectpath.resolvePoint to this local file
{
    test: /.js$/
    use: [
        {
            loader: path.resolve('path/to/loader.js'),
            options: {/* ... */}
        }
    ]
}
Copy the code
  1. Multiple loaders that you can useresolveLoader.modulesConfigure that Webpack will search these loaders from these directories
resolveLoader: {
    modules: [
        'node_modules',
        path.resolve(__dirname, 'loaders')
    ]
}
Copy the code
  1. npm link

NPM link: NPM link: NPM Link: NPM Link: NPM Link: NPM Link: NPM Link: NPM Link: NPM Link: NPM Link: NPM Link: NPM Link