Registering custom webpack plugins

Nuxt modules not only allow us to register webpack loaders but also webpack plugins by using this.options.build.plugins.push in the following module/plugin architecture:

export default function (moduleOptions) {
  this.options.build.plugins.push({
    apply(compiler) {
      compiler.hooks.<hookType>.<tap>('<PluginName>', (param) => {
        //...
      })
    }
  })
}

The <tap> depends on the hook type; it can be tapAsync, tapPromise, or just tap. Let's create a very simple "Hello World" webpack plugin through a Nuxt module in the following steps:

1. Create a module file using the module/plugin architecture we've provided for printing "Hello World!" as follows:

// modules/hello-world/module.js
export default function (moduleOptions) {
  this.options.build.plugins.push({
    apply(compiler) {
      compiler.hooks.done.tap('HelloWordPlugin', (stats) => {
        console.log(&apos...