How to add caching to webpack pug?

Question

webpack

Good afternoon.
I am building a site consisting of 40+ pug modules, when changing the pug file, all 40+ modules are compiled, and this takes a lot of time.
Tell me, is it possible to add caching to pug-loader or some other way to force webpack to recompile only modified pug files?

I attach the webpack and pug file configurations below

webpack:

const path = require ('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const merge = require('webpack-merge');
const pug = require ('./webpack/pug');
const devserver = require('./webpack/devserver');
const sass = require('./webpack/sass');
const css = require('./webpack/css');
const extractCss = require('./webpack/css.extract');
const images = require('./webpack/images');
const fonts = require('./webpack/fonts');

const PATHS = {
  source: path.join(__dirname, 'source'),
  build: path.join(__dirname, 'build')
};

const common= merge([
  {
    mode:'',
    entry: {
      'index': PATHS.source + '/pages/index/index.js',
    },
    output: {
      path: PATHS.build,
      publicPath: '/',
      filename: 'js/[name].js'
    },
    plugins:[
      new HtmlWebpackPlugin({
        filename:'index.html',
        chunks: ['index', 'common'],
        template: PATHS.source + '/pages/index/index.pug'
      }),
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
      })
    ],
    optimization:{
      splitChunks:{
        chunks: 'all',
        name: 'common'
      }
    },
    devtool:'',
  },
  pug(),
  images(),
  fonts()
]);

const developmentConfig ={
  devServer: {
    contentBase:'./build',
    hot: true, 
    stats: 'errors-only',
    port: 9000,
    watchContentBase: true
  }
};

module.exports = function(env){
  common.mode = env;
  if (env === 'production'){
    common.devtool = false;
    return merge([
      common,
      extractCss(),
    ])
  }
  if (env === 'development'){
    common.devtool = 'eveal-sourcemap';
    return merge([
      common,
      devserver(),
      sass(),
      css()
    ])
  }
};

pug:

module.exports = function(){
  return {
    module:{
      rules: [
        {
          test: /\.pug$/,
          loader:'pug-loader',
          options:{
            pretty: true
          }
        }
      ]
    }
  }
}

PS
Searching on the Internet only led me to update the html-webpack-plugin to version 4.0, which I did, but it did not help.

Answer 1

Try cache-loader