помогите настроить сборку gulp + webpack

----------файл "gulpfile.js"


// Импорт основного модуля
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 { json } from "./config/gulp-tasks/json.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, json, gulp.parallel(html, css, images, gitignore));

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

// Построение сценариев выполнения задач
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);

---------файл "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', // localhost

        // Расскоментировать на слабом ПК
        // (в режиме разработчика, папка с результаттом будет создаваться на диске)
        /*
        devMiddleware: {
            writeToDisk: true,
        },
        */

        watchFiles: [
            `${paths.src}/**/*.html`,
            `${paths.src}/**/*.pug`,
            `${paths.src}/**/*.htm`,
            `${paths.src}/img/**/*.*`,
            `${paths.src}/json/*.*`,
        ],
    },
    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;


---------файл "webpack.prod.js"


import fs from 'fs';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import FileIncludeWebpackPlugin from 'file-include-webpack-plugin-replace';
import CopyPlugin from "copy-webpack-plugin";
import HtmlWebpackPlugin from 'html-webpack-plugin';
import TerserPlugin from "terser-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,
        destination: '../',
        htmlBeautifyOptions: {
            "indent-with-tabs": true,
            'indent_size': 3
        },
        replace: [
            { 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: "production",
    cache: {
        type: 'filesystem'
    },
    optimization: {
        minimizer: [new TerserPlugin({
            extractComments: false,
        })],
    },
    output: {
        path: `${paths.build}`,
        filename: 'app.min.js',
        publicPath: '/',
    },
    module: {
        rules: [
            {
                test: /\.(scss|css)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'string-replace-loader',
                        options: {
                            search: '@img',
                            replace: '../img',
                            flags: 'g'
                        }
                    }, {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 0,
                            sourceMap: false,
                            modules: false,
                            url: {
                                filter: (url, resourcePath) => {
                                    if (url.includes("img") || url.includes("fonts")) {
                                        return false;
                                    }
                                    return true;
                                },
                            },
                        },
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sassOptions: {
                                outputStyle: "expanded",
                            },
                        }
                    },
                ],
            }, {
                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 MiniCssExtractPlugin({
            filename: '../css/style.css',
        }),
        new CopyPlugin({
            patterns: [
                {
                    from: `${paths.src}/files`, to: `../files`,
                    noErrorOnMissing: 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;

---------файл "gulp-settings.js"


// Получаем имя папки проекта
import * as nodePath from 'path';
const rootFolder = nodePath.basename(nodePath.resolve());

// Пути к папке с исходниками и папке с результатом
const buildFolder = `./dist`;
const srcFolder = `./src`;

// Пути к папкам и файлам проекта
export const path = {
    build: {
        html: `${buildFolder}/`,
        js: `${buildFolder}/js/`,
        css: `${buildFolder}/css/`,
        images: `${buildFolder}/img/`,
        fonts: `${buildFolder}/fonts/`,
        files: `${buildFolder}/files/`,
    },
    src: {
        html: `${srcFolder}/*.html`,
        pug: `${srcFolder}/pug/*.pug`,
        js: `${srcFolder}/js/app.js`,
        scss: `${srcFolder}/scss/style.scss`,
        images: `${srcFolder}/img/**/*.{jpg,jpeg,png,gif,webp}`,
        svg: `${srcFolder}/img/**/*.svg`,
        fonts: `${srcFolder}/fonts/*.*`,
        files: `${srcFolder}/files/**/*.*`,
        svgicons: `${srcFolder}/svgicons/*.svg`,
    },
    clean: buildFolder,
    buildFolder: buildFolder,
    rootFolder: rootFolder,
    srcFolder: srcFolder,
    ftp: `` // Путь к нужной папке на удаленном сервере. gulp добавит имя папки проекта автоматически
};

// Настройка FTP соединения
export const configFTP = {
    host: "", // Адрес FTP сервера
    user: "", // Имя пользователя
    password: "", // Пароль
    parallel: 5 // Кол-во одновременных потоков
}



---------файл "json.js"



export const json = () => {
    return app.gulp.src(app.path.src.json)
        .pipe(app.plugins.plumber(
            app.plugins.notify.onError({
                title: "JSON",
                message: "Error: <%= error.message %>"
            }))
        )
        .pipe(app.gulp.dest(app.path.build.json));
}

---------файл "gulp-plugins"


// Импортируем модули
import notify from "gulp-notify";
import newer from "gulp-newer";
import plumber from "gulp-plumber";
import ifPlugin from "gulp-if";
import prettier from "gulp-prettier";
import rename from 'gulp-rename';

// Экспортируем объект
export const plugins = {
    notify,
    if: ifPlugin,
    prettier,
    newer,
    plumber,
    rename
}



-------функция из "script.js"


document.addEventListener("click", function (e) {
    getProducts();
});


async function getProducts () {
    const file = `json/products.json`;
    let response = await fetch(file);
    if(response.ok) {
        let result = await response.json();
        console.log(result);
    } else {
        alert('Ошибка');
    }
}