Как исправить Webpack [DEP_WEBPACK_COMPILATION_ASSETS]?

Итак, друзья, столкнулся с такой проблемой:

[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)

Четыре страницы гугла горят фиолетовым (всм изучены). Перепробовал кучу способов, не работает ни один Что интересно проблема появилась в середине работы. То есть я просто верстал проект как вдруг hot перестал мне обновлять страницу. Полез в логи и увидел то, ради чего вообще задаётся вопрос. Всё, что раньше было сделано, спокойно работает, обновляется и изменяется. Всё, что создано после страницы, на которой вылезла ошибка не работает. Всё - это ВСЁ. Абсолютно новый проект тоже не хочет нормально работать. В старых то, что было уже создано - норм, новые ни в какую.

html-webpack-plugin последней версии(5.5.0) . Вообще все плагины насильственно сменил на последние версии.

В свежесозданной странице ничего такого нет. На момент вылезания косяков даже html не был дописан.

Шаблон сборки есть на гитхаб, на всякий случай продублирую сюда некоторые конфиги

package.json

{
  "name": "mau0hezzz-start",
  "description": "Start template with Gulp and Webpack",
  "private": true,
  "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 (не вижу особого смысла его смотреть, тк ругань идёт от вебпака)

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);


Ответы (0 шт):