Registering custom webpack loaders

When we want to extend the webpack config in Nuxt, we usually do it in nuxt.config.js with build.extend. But we can do the same through a module by using this.extendBuild with the following module/loader template:

export default function (moduleOptions) {
  this.extendBuild((config, { isClient, isServer }) => {
    //...
  })
}

For example, let's say we want to extend our webpack config with svg-transform-loader, which is a webpack loader for adding or modifying tags and attributes in an SVG image. The main purpose of this loader is to allow us to use fill, stroke, and other manipulations on SVG images. We also can use it in CSS, Sass, Less, Stylus, or PostCSS; for example, if you want to fill an SVG image with the white color, you can use fill to add fff (the CSS color white code) to the image as follows:

.img {
  background-image: url('./img.svg?fill=fff');
}

If you want to stroke the SVG image by using a variable in Sass, you...