80 lines of code to write a Webpack plugin and publish it to npm

1. Introduction

I have been studying the principles of Webpack recently. I only knew how to configure Webpack before, but I didn’t know its internal processes. After a round of study, I feel that I have benefited a lot. In order to consolidate what I have learned, I decided to try to write a plug-in by myself.

The functions implemented by this plugin are relatively simple:

• By default, the print output of console.log in js code is cleared;
• Other methods of removing console , such as console.warn , console.error , etc., can be implemented by passing in configuration;

2. Webpack construction process and plugin principle

2.1 Webpack build process

The main construction process of Webpack can be divided into three stages:

• Initialization phase: start the build, read and merge configuration parameters, load Plugin , and instantiate Compiler .
• Compilation phase: issued from Entry , the corresponding Loader is called serially for each Module to translate the file content, and then Module that the Module depends on is found and recursively compiled.
• Generation phase: combine the compiled Module into Chunk , convert Chunk into files, and output them to the file system.

If Webpack packages the production environment files, it will only perform one build, and the above stages will be executed in sequence. However, when monitoring mode is turned on, such as in a development environment, Webpack will continue to build.

2.2 Plugin Principle

A Webpack plugin is usually a class with an apply function, where constructor can receive the passed in configuration items. When the plugin is installed, the apply function is called once and receives Compiler object. We can then listen to different event hooks on Compiler object to develop plugin functionality.

// Define a plugin class MyPlugin {
  // Constructor to receive plugin configuration options 
  constructor(options) {
    // Get configuration items and initialize the plugin}

  // When the plugin is installed, apply is called and passed to the compiler
  apply(compiler) {
    // Get exclusive access to comolier, you can listen to event hooks // Function development... 
  }
}

2.3 compiler and compilation objects

The two most commonly used objects in the development of Plugin are Compiler and Compilation :

• Compiler object is instantiated when Webpack starts. This object contains all the configuration information of Webpack environment, including options , loaders , plugins , etc. In the entire Webpack build process, Compiler object is globally unique, and it provides many event hook callbacks for plug-ins to use.
• The Compilation object contains the current module resources, compiled resources, changed files, etc. Compilation object is not unique in the Webpack build process. If Webpack turns on the file detection function in development mode, Webpack will rebuild each time the file changes, and a new Compilation object will be generated. The Compilation object also provides many event callbacks for plug-ins to extend.

3. Plugin Development

3.1 Project Directory

The functions implemented by this plug-in are relatively simple, and the file directory is not complicated. First, create an empty folder remove-console-Webpack-plugin and run npm init in the folder directory. Fill in package.json related information according to the prompts. Then create a new src folder and put the main code of the plug-in in src/index.js . If you need to put the project on github , it is best to add files such as .gitignore and README.md .

// remove-console-Webpack-plugin
├─src
│ └─index.js  
├─.gitignore
├─package.json
└─README.md

3.2 Plugin Code

The plug-in code logic is not complicated, there are several main points:

• Receive the configuration parameters in the constructor, merge the parameters, get the console function that needs to be cleared, and store it in the removed array;
• Listen to the compiler.hook.compilation hook in the apply function. After the hook is triggered, get compilation and further listen to its hook. The hooks of Webpack4 and Webpack5 are different here, so compatibility is required.
• Define the assetsHandler method to process js files, and use regular expressions to clear the console functions included in removed ;

class RemoveConsoleWebpackPlugin {
  // The constructor accepts configuration parameters constructor(options) {
    let include = options && options.include;
    let removed = ['log']; // default clearing methodif (include) {
      if (!Array.isArray(include)) {
        console.error('options.include must be an Array.');
      } else if (include.includes('*')) {
        // Passing in * means clearing all consoles removed = Object.keys(console).filter(fn => {
          return typeof console[fn] === 'function';
        })
      } else {
        removed = include; // Overwrite according to the incoming configuration}
    }

    this.removed = removed;
  }

  // Webpack will call the apply method of the plugin instance and pass in the compiler object apply(compiler) {
    // js resource code processing function let assetsHandler = (assets, compilation) => {
      let removedStr = this.removed.reduce((a, b) => (a + '|' + b));

      let reDict = {
        1: [RegExp(`\\.console\\.(${removedStr})\\(\\)`, 'g'), ''],
        2: [RegExp(`\\.console\\.(${removedStr})\\(`, 'g'), ';('],
        3: [RegExp(`console\\.(${removedStr})\\(\\)`, 'g'), ''],
        4: [RegExp(`console\\.(${removedStr})\\(`, 'g'), '(']
      }

      Object.entries(assets).forEach(([filename, source]) => {
        // Match js file if (/\.js$/.test(filename)) {
          // File content before processing let outputContent = source.source();

          Object.keys(reDict).forEach(i => {
            let [re, s] = reDict[i];
            outputContent = outputContent.replace(re, s);
          })

          compilation.assets[filename] = {
            // Return file content source: () => {
              return outputContent
            },
            // Return file size size: () => {
              return Buffer.byteLength(outputContent, 'utf8')
            }
          }
        }
      })
    }

    /**
     * Listen to the event through compiler.hooks.compilation.tap * Get the compilation object in the callback method */
    compiler.hooks.compilation.tap('RemoveConsoleWebpackPlugin',
      compilation => {
        // Webpack 5
        if (compilation.hooks.processAssets) {
          compilation.hooks.processAssets.tap(
            { name: 'RemoveConsoleWebpackPlugin' },
            assets => assetsHandler(assets, compilation)
          );
        } else if (compilation.hooks.optimizeAssets) {
          // Webpack 4
          compilation.hooks.optimizeAssets.tap(
            'RemoveConsoleWebpackPlugin', 
            assets => assetsHandler(assets, compilation)
          );
        }
      })
  }
}

// export Plugin
module.exports = RemoveConsoleWebpackPlugin;

4. Publish to npm

If you want others to use your plugin, you need to publish it to npm . The main process of publishing is:

First, register an account on npm official website, then open the command line tool, enter npm login in any directory and log in as prompted;

After logging in, you can use npm whoami to check whether the login is successful;

Before publishing, check whether the package.json file in the root directory is filled in correctly. The main fields are:

• name: determines the name that users use when downloading your plugin. It cannot have the same name as an existing third-party package on npm , otherwise it cannot be published;
• main: The main file entry of the plugin. When Webpack introduces the plugin, it is imported from this directory;
• version: Each time an update is released, the version number must be different from the previous version, otherwise the upload will fail;
• repository: If your plugin code is placed on github , gitee or other websites, you can fill it in;
• private: cannot be set to true , otherwise it cannot be published;

When everything is ready, switch to the directory where the plugin is located and run npm publish to upload the plugin;

After uploading successfully, search on npm official website to see if you can find the plugin;

5. Conclusion

This concludes the article about writing a Webpack plugin in 80 lines of code and publishing it to npm. For more information about publishing Webpack plugins to npm, please search for previous articles on 123WORDPRESS.COM or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!