How to fix Webpack [DEP_WEBPACK_COMPILATION_ASSETS]?

Question

gulp.js

problem:

webpack_error-spoiler

[DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated. 
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.    
 Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.     
Make sure to select an appropriate stage from 
Compilation.PROCESS_ASSETS_STAGE_*. (Use `node --trace-deprecation ...` to show where the warning was created)

I tried a bunch of ways, none of them
work. Interestingly, the problem appeared in the middle of work.
That is, I was just setting up the project, when suddenly hot stopped updating the page for me. I got into the logs and saw what the question is asking for.
Everything that has been done before is quietly working, being updated and changed. Everything that is created after the page on which the error got out does not work.
Everything is EVERYTHING. A completely new project also does not want to work normally. In the old, what has already been created is the norm, the new ones are not.

html-webpack-plugin latest version (5.5.0) . In general, all plugins were forcibly changed to the latest versions.

There is nothing like that in the newly created page. At the time of the jambs getting out, even html was not completed.

The assembly template is ongithub , just in case, I will duplicate some configs here

package.json

{
  "name": "mau0hezzz-start",
  "version": "3.0.0",
  "description": "Start template with Gulp and Webpack",
  "author": "",
  "private": true,
  "license": "",
  "type": "module",
  "scripts": {
    "dev": "gulp && webpack serve --progress -c config/webpack.dev.js",
    "build": "gulp build --build",
    "sprite": "gulp sprite",
    "fonts": "gulp fonts --rewrite",
    "deploy": "gulp deployFTP --build",
    "zip": "gulp deployZIP --build",
    "devbuild": "gulp build --build --nowebp",
    "tmp": "gulp -f gulpfile.tmp.js",
    "bem": "fls-bemtree-from-html"
  },
  "devDependencies": {
    "copy-webpack-plugin": "latest",
    "css-loader": "latest",
    "del": "latest",
    "file-include-webpack-plugin-replace": "latest",
    "fls-bemtree-from-html": "^1.0.0",
    "gulp": "latest",
    "gulp-autoprefixer": "latest",
    "gulp-clean-css": "latest",
    "gulp-file-include": "latest",
    "gulp-fonter-fix": "latest",
    "gulp-group-css-media-queries": "latest",
    "gulp-if": "latest",
    "gulp-imagemin": "latest",
    "gulp-newer": "latest",
    "gulp-notify": "latest",
    "gulp-plumber": "latest",
    "gulp-prettier": "latest",
    "gulp-rename": "latest",
    "gulp-svg-sprite": "latest",
    "gulp-ttf2woff": "latest",
    "gulp-ttf2woff2": "latest",
    "gulp-util": "latest",
    "gulp-version-number": "latest",
    "gulp-webp": "latest",
    "gulp-webp-html-nosvg": "latest",
    "gulp-webpcss": "latest",
    "gulp-zip": "latest",
    "html-webpack-plugin": "latest",
    "inputmask": "latest",
    "lightgallery": "latest",
    "load-plugins": "latest",
    "mini-css-extract-plugin": "latest",
    "nouislider": "latest",
    "pug": "latest",
    "pug-loader": "latest",
    "sass": "latest",
    "sass-loader": "latest",
    "smooth-scroll": "latest",
    "string-replace-loader": "latest",
    "style-loader": "latest",
    "swiper": "latest",
    "terser-webpack-plugin": "latest",
    "tippy.js": "latest",
    "transform-runtime": "0.0.0",
    "vanilla-lazyload": "latest",
    "vinyl-ftp": "latest",
    "webp-converter": "2.2.3",
    "webpack": "latest",
    "webpack-cli": "latest",
    "webpack-dev-server": "latest",
    "webpack-stream": "latest"
  },
  "dependencies": {
    "simplebar": "latest"
  }
}

webpack.dev.js

import fs from 'fs';
import FileIncludeWebpackPlugin from 'file-include-webpack-plugin-replace';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import CopyPlugin from "copy-webpack-plugin";

import * as path from 'path';

const srcFolder = "src";
const builFolder = "dist";
const rootFolder = path.basename(path.resolve());

let pugPages = fs.readdirSync(srcFolder).filter(fileName => fileName.endsWith('.pug'))
let htmlPages = [];

if (!pugPages.length) {
  htmlPages = [new FileIncludeWebpackPlugin({
    source: srcFolder,
    htmlBeautifyOptions: {
      "indent-with-tabs": true,
      'indent_size': 3
    },
    replace: [
      { regex: '<link rel="stylesheet" href="css/style.min.css">', to: '' },
      { regex: '../img', to: 'img' },
      { regex: '@img', to: 'img' },
      { regex: 'NEW_PROJECT_NAME', to: rootFolder }
    ],
  })];
}

const paths = {
  src: path.resolve(srcFolder),
  build: path.resolve(builFolder)
}
const config = {
  mode: "development",
  devtool: 'inline-source-map',
  optimization: {
    minimize: false
  },
  entry: [
    `${paths.src}/js/app.js`
  ],
  output: {
    path: `${paths.build}`,
    filename: 'js/app.min.js',
    publicPath: '/'
  },
  devServer: {
    historyApiFallback: true,
    static: paths.build,
    open: true,
    compress: true,
    port: 'auto',
    hot: true,
    host: 'local-ip',
    // Расскоментировать на слабом ПК
    devMiddleware: {
      writeToDisk: true,
    },
    watchFiles: [
      `${paths.src}/**/*.html`,
      `${paths.src}/**/*.pug`,
      `${paths.src}/**/*.htm`,
      `${paths.src}/img/**/*.*`
    ],
  },
  module: {
    rules: [
      {
        test: /\.(scss|css)$/,
        exclude: `${paths.src}/fonts`,
        use: [
          'style-loader',
          {
            loader: 'string-replace-loader',
            options: {
              search: '@img',
              replace: '../img',
              flags: 'g'
            }
          }, {
            loader: 'css-loader',
            options: {
              sourceMap: true,
              importLoaders: 1,
              modules: false,
              url: {
                filter: (url, resourcePath) => {
                  if (url.includes("img/") || url.includes("fonts/")) {
                    return false;
                  }
                  return true;
                },
              },
            },
          }, {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            }
          }
        ],
      }, {
        test: /\.pug$/,
        use: [
          {
            loader: 'pug-loader'
          }, {
            loader: 'string-replace-loader',
            options: {
              search: '@img',
              replace: 'img',
              flags: 'g'
            }
          }
        ]
      }
    ],
  },
  plugins: [
    ...htmlPages,
    ...pugPages.map(pugPage => new HtmlWebpackPlugin({
      minify: false,
      template: `${srcFolder}/${pugPage}`,
      filename: `${pugPage.replace(/\.pug/, '.html')}`
    })),
    new CopyPlugin({
      patterns: [
        {
          from: `${srcFolder}/img`, to: `img`,
          noErrorOnMissing: true,
          force: true
        }, {
          from: `${srcFolder}/files`, to: `files`,
          noErrorOnMissing: true,
          force: true
        }, {
          from: `${paths.src}/favicon.ico`, to: `./`,
          noErrorOnMissing: true
        }
      ],
    }),
  ],
  resolve: {
    alias: {
      "@scss": `${paths.src}/scss`,
      "@js": `${paths.src}/js`,
      "@img": `${paths.src}/img`
    },
  },
}
export default config;

gulpfile (I don't see much point in watching it, maybe the swearing comes from webpack)

// Импорт основного модуля
import gulp from "gulp";
// Импорт общих плагинов
import { plugins } from "./config/gulp-plugins.js";
// Импорт путей
import { path } from "./config/gulp-settings.js";

// Передаем значения в глобальную переменную
global.app = {
  isBuild: process.argv.includes('--build'),
  isDev: !process.argv.includes('--build'),
  isWebP: !process.argv.includes('--nowebp'),
  isFontsReW: process.argv.includes('--rewrite'),
  gulp: gulp,
  path: path,
  plugins: plugins
}

// Импорт задач
import { reset } from "./config/gulp-tasks/reset.js";
import { html } from "./config/gulp-tasks/html.js";
import { css } from "./config/gulp-tasks/css.js";
import { js } from "./config/gulp-tasks/js.js";
import { jsDev } from "./config/gulp-tasks/js-dev.js";
import { images } from "./config/gulp-tasks/images.js";
import { ftp } from "./config/gulp-tasks/ftp.js";
import { zip } from "./config/gulp-tasks/zip.js";
import { sprite } from "./config/gulp-tasks/sprite.js";
import { gitignore } from "./config/gulp-tasks/gitignore.js";
import { otfToTtf, ttfToWoff, fonstStyle } from "./config/gulp-tasks/fonts.js";

// Последовательная обработака шрифтов
const fonts = gulp.series(reset, otfToTtf, ttfToWoff, fonstStyle);
// Основные задачи будем выполнять параллельно после обработки шрифтов
const devTasks = gulp.parallel(fonts, gitignore);
// Основные задачи будем выполнять параллельно после обработки шрифтов
const buildTasks = gulp.series(fonts, jsDev, js, gulp.parallel(html, css, images, gitignore));

// Экспорт задач
export { html }
export { css }
export { js }
export { jsDev }
export { images }
export { fonts }
export { sprite }
export { ftp }
export { zip }

// Построение сценариев выполнения задач
const development = gulp.series(devTasks);
const build = gulp.series(buildTasks);
const deployFTP = gulp.series(buildTasks, ftp);
const deployZIP = gulp.series(buildTasks, zip);

// Экспорт сценариев
export { development }
export { build }
export { deployFTP }
export { deployZIP }

// Выполнение сценария по умолчанию
gulp.task('default', development);