Webpack for Beginners — Part 3

And here we are at the third part in the Webpack series for beginners. If you would like to check out the previous parts, you can get them here (part 1) and there (part 2). In this part, we will simply explore **plugins**.

According to the documentation on Webpack, **plugins** are the backbone of webpack. Yes backbone! This means that Webpack itself is built on the same plugin system which we use in our Webpack configuration.

But what really is a plugin in Webpack? Well, think of plugins as a means to extend Webpack itself with your great ideas. For example, we already know that Webpack is a module bundler and generates bundled chunks in an output file. So let’s say we wanted to do some magic with that output file and make it smaller to improve load time. Well, we can simply achieve this by using a plugin. The hidden truth is that there’s a plugin already meant for that — UglifyJsPlugin(). For a list of plugins that is already bundled with the Webpack library, check here.

Before we tap into the world of creating plugins, let’s at least go through how to use one. The snippet below illustrates how to use the UglifyJsPlugin().

const webpack = require('webpack'); //to access built-in plugins
const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin() // Using the plugin
  ]
};

module.exports = config;

Plugins can simply be consumed (used) by adding the plugin with any configuration that comes with it as part of the list of plugins in the specified webpack.config.js file. So simple, isn’t it?

Some of the famous Webpack plugins include UglifyJsPluginHtmlWebpackPlugin — an external plugin not part of Webpack itself and EnvironmentPlugin. There are hordes of plugins available. And the good part of this is that if you feel there’s no plugin available (which is rare) for your use case, create one!!

Wait! How do I create a plugin for my use case? Remember that I stated earlier that plugins are the backbone of Webpack? The main reason why this is possible is that by using plugins, you are exposed to the Webpack compilerand the compilation process. Hmm, wondering how?

A webpack plugin is a JavaScript object with an apply property. This applyproperty is called by the Webpack compiler itself. It’s even possible to run child compilers or work in tandem with other loaders. Still confused? Let’s create a plugin.

module.exports = class CustomPlugin {
  apply(compiler) {
    console.log(compiler);  // Seeing all that is exposed 
  }
}

This simple plugin can be specified as part of our Webpack configuration.

const webpack = require('webpack'); //to access built-in plugins
const path = require('path');
const CustomPlugin = require('path-to-custom-plugin');
const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(), // Using the plugin
    CustomPlugin()   // Using the plugin in the configuration
  ]
};

module.exports = config;

Whew!! All done now. We have configured a plugin called CustomPlugin and added it to the list of plugins in our config file. How useful is this? For now CustomPlugin is useless. But remember that we have all that’s exposed to us in the compiler. We can do whatever we want with the information presented to us in the compiler.

A good strategy on the other hand is to pass some sort of plugin specific configuration to our plugin via the constructor. Thus, we can use them as well as the information presented to us in the compiler to do our very own magic.

If we are interested in messing around (or having fun) with the compilation process, that is very much possible as well.

module.exports = class CustomPlugin {
    constructor(configOptions) {
      this.config = configOptions;
    }
    apply(compiler) {
        compiler.plugin("emit", (compilation, callback) => {
          console.log(compilation);
          callback();
    }
}

This is way cooler!! Yes, lots of stuffs. This is because the compilation process presents to us the whole dependency graph that Webpack traverses through. And everything related to the compilation process is exposed here. Tap in and mess it up!!

Now we simply update our webpack.config.js plugins.

“`

plugins: [
    new webpack.optimize.UglifyJsPlugin(), // Using the plugin
    CustomPlugin({       // Using the plugin in the configuration
      ...some plugin config options
    })  
  ]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s