Webpack Plugin Boilerplate

A webpack plugin boilerplate built for webpack 4.

Table of Contents

• Features
• Usage
• Documentation
• Installation
• Support

Features

Why use this boilerplate? It comes with a lot of features out of the box that will let you focus on writing webpack plugins.

• testable: built with jest installed and ready to go. Also provides code coverage.
• compatible: write cutting-edge javascript and Babel will compile it to a version that older browsers support
• consistent: uses webpack's eslint config and lint-staged to run eslint on any .js files you commit.
• extensible: simply replace boilerplate defaults and you have an npm package just waiting to be written.

Usage

This example code is already written in src/index.js. To see the demo plugin in action, you shouldn't need to write any new code. This is just a walkthrough of how it was written.

Writing The Plugin

Let's say you want to create a webpack plugin called DemoPlugin that prints "Hello World" once webpack compilation is done (super useful!).

To do this, we will need to make sure our code fulfills a few important properties:

1. It should be a class that is named the same as your plugin. In this case we will use DemoPlugin.
2. It should have a class method apply that takes a compiler parameter. This compiler parameter is described in more details in the compiler hook documentation.
3. Inside the apply method, we will hook into the done lifecycle hook and do our console.log.

Your plugin's main file will be the src/index.js file. It should look something like this:

export default class DemoPlugin {
  constructor(options) {
    this.options = options;
  }

  apply(compiler) {
    compiler.hooks.done.tap('DemoPlugin', () => {
      console.log('\nHello world\n');
    });
  }
}

Notice we have used compiler.hooks.done.tap to tap into the done lifecycle hook. Our callback will now be called when webpack compilation step has been completed.

Building The Plugin

Now we need to compile our plugin.

npm run build

We now have our built plugin files in the /dist directory. The main one we want to import is located in dist/cjs.js. When you publish your NPM module, this will be the file that gets imported since it's specified in our package.json file as our main file.

For local development, you'll have to directly import the cjs.js to test your local changes.

Including The Plugin In Webpack

Now, inside of your webpack configuration for your project, you can import and add your plugin to your plugins list.

const DemoPlugin = require('./path/to/DemoPlugin/dist/cjs');

module.exports = {
  mode: 'development',
  plugins: [
    new DemoPlugin({}),
  ],
};

The final step is to build your webpack project. In the output, you should see that the DemoPlugin was called after webpack finished compilation and printed "Hello World" to the console.

And that's it! You now can work on adding some useful functionality to your plugin.

Important: Don't forget to rebuild your plugin each time you make a change!

Documentation

See the webpack plugin API Docs for a full description of webpack plugin API.

Installation

1. Clone the repository into your "DemoPlugin" directory (replace DemoPlugin with your plugin name).

   git clone https://github.com/ctaylo21/webpack-plugin-boilerplate.git DemoPlugin && cd DemoPlugin

2. Remove the git repository, and then initialize a new one

   rm -rf .git && git init

3. Remove README and replace with your own

   rm README.md && touch README.md

4. Update package.json and install dependencies

   npm init && npm install

   Don't forget to update any relevant fields in the package.json file!

5. Start coding!

Support

If you find any problems or bugs, please open a new issue.