Check the second part here

You won’t face a situation where your project have some specific requirement for which there is no plugin available. But if you find yourself in a situation where there is no other way but to write a custom plugin yourself then don’t worry it’s not that hard.

In this post I will show you how to write your own webpack-plugin from scratch. So let’s get started.

You should keep these point in mind while writing a webpack plugin.

1. Webpack follows Object oriented approach and so should your plugin.
2. Your plugin class should have an “apply” method which accepts an argument “compiler”.

Now that we have our basic requirement in place, lets create a plugin.

1. Create a file HelloWorld. This will the main file which will have your plugin class. As I explained above it should have an apply method which accepts compiler as it’s argument.

class HelloWorld {
  apply(compiler) {

}
}

The compiler is an instance of Tapable on which you can listen to different events and execute your code. If you want to check all the event hooks available in webpack check here.

2. In this example for simplicity I am going to listen to “done” event and display a message using console.log

class HelloWorld {
  apply(compiler) {
    compiler.plugin("done", () => {
      console.log("Hello world");
  })
}

3. Import this into your test app which is using webpack and add this plugin to your plugins array like this.

const HelloWorld = require('relative/path/to/above/created/file')plugins: [
  new HelloWorld()
]

4. Run webpack or webpack-dev-server you will see your “Hello world” statement just before the emitted chunks.

5. If you want to pass some configuration to your plugin, all you need to do is add constructor to your HelloWorld class which accepts the passed arguments.

class HelloWorld {
  constructor(options) {
    this.options = options;
  }

apply(compiler) {
    compiler.plugin("done", () => {
      console.log(this.options.message);
  })
}

6. Now pass this message from the webpack config file.

const HelloWorld = require('relative/path/to/above/created/file')plugins: [
  new HelloWorld({
    message: "Hello world from the config"
  })
]

and voila! you have created your first webpack plugin. Now I know this was a simple example but try to hook into different event and see what you can build. There are endless possibilities.

You can check out my Webpack plugin for reference which I created just today at Github. This plugin helps keep you track of your bundle size and you can configure it according to your needs, check github readme for more info.

Feel free to ask if you face any difficulty.

Thanks for reading. :) Please 👏 if you like this post.