При сборке в production падает Webpack

У меня есть сборка Gulp + Webpack. Последний обрабатывает только js-скрипты через webpack-stream При запуске в dev mode всё собирается и работает хорошо. При попытке запуска в production падает задача именно по обработке js. Путём отключения выяснил, что проблема в подключаемом слайдере spliderjs. Однако подключаю его, как указано спеке на сайте и не могу понять, почему падает сборка. Причём конфиги webpack-а простейшие!

Вот выдержка задачи из Gulp:

function js() {
  return src("source/js/*.js")
    .pipe(webpackStream(webpackConfig), webpack)
    .pipe(dest("./dist/js"));
}

Вот команды для запуска dev или prod:

export const build = series(clean, copy, parallel(sprite, css, js), html); // npm run build
export default series(build, server); // npm run dev

И скрипты в package.json:

"scripts": {
    "dev": "gulp",
    "build": "set NODE_ENV=true && gulp build",
    "clean": "gulp clean"
  },

webpackConfig:

import path from "path";
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  entry: {
    main: path.resolve(__dirname, "source/js/index.js"),
  },

  output: {
    filename: '[name].bundle.js',
  },

  mode: process.env.NODE_ENV ? 'production' : 'development',
  devtool: process.env.NODE_ENV ? false : "source-map",
  target: ['web', 'es5'],

  optimization: {
    splitChunks: {
      cacheGroups: {
        splide: {
          test: /[\\/]node_modules[\\/]/,
          name: 'splide',
          chunks: 'all',
        },
      },
    },
    chunkIds: 'named'
  },
};

Файловая структура проекта:

Подключение библиотеки слайдера splidejs в модульный файл:

Подключение модуля splide.mjs в index.js, который является точкой входа для webpack:

При этом слайдер рабочий, всё подхватывается, но только в dev mode. Все версии node, gulp, webpack текущие. Подскажите, кто сталкивался с таким, как исправить. А, да, вот ошибка:

Спасибо за детальную информацию.

Текст ошибки говорит что проблема в объекте конфига для вебпака.

Я пропустил конфиг через ИИшку. Она говорит:

  1. output.path - не хватает этого свойства. Это свойство обязательно в конфиге для работы вебпака.
  2. логика с окружением prod/dev выглядит ошибочной. Текущий код process.env.NODE_ENV ? 'production' : 'development', будет результировать production если есть хоть какое значение в NODE_ENV. Обычно делают process.env.NODE_ENV === 'production' ? 'production' : 'development'.

И остальное в его комментарии по-мелочи:

Misleading:
3. splitChunks config - names all vendor code as 'splide' chunk but tests for any node_modules. Should be more specific or use a generic name like 'vendor'
Potential issues:
4. es5 target - conflicts with modern features and may cause bundle size/performance issues
1 лайк

Дима, спасибо тебе, что вникаешь в эти простыни и пытаешься помочь :)

Я внёс правки согласно твоему ответу. Проблема не решилась. Но я выяснил следующее:

  1. Если из index.js убрать import ‘./splide.mjs’, проблема исчезает. Это странно, т.к. эта библиотека как раз использует модули и современная. Порывшись в интернете, у меня закралась мысль, что это как-то связано с @ перед названием библиотеки, хотя в документации именно так её и нужно подключать. Я пробовал также скачивать непосредственно splide.min.js и устанавливать файлом в проект и подключать оттуда - та же проблема.
  2. Если установить Gulp 4 вместо Gulp 5 проблема также исчезает! Получается, Webpack имеет какую-то несовместимость с pipe-системой Gulp 5?

Пока что это всё, что удалось выяснить. Мне хотелось бы всё же остаться на Gulp 5.

В прошлый раз ИИ не помог мне в решении вопроса и как-то я был скептично к нему настроен в этот раз. Но, как ни странно, в этот раз он справился блестяще и решил мне эту проблему!

Она связана с тем, что Gulp 5 использует совсем другую систему потоков, которая несовместима с webpack-stream. Несмотря на то, что Gulp 5 - ещё не стабильная версия, при установке закачивается именно она. Пришлось отказаться от этого плагина и немного изменить gulpfile.mjs:

  1. Добавить
import { execa } from 'execa';
  1. Задачу js прописать так:
async function js() {
  await execa('npx', ['webpack', '--config', 'webpack.config.mjs'], { stdio: 'inherit' });
}
  1. Добавить в output конфига webpack-а путь:
output: {
    .......
    path: path.resolve(__dirname, "dist/js"),
  },

И всё заработало! В общем, я попал на переход на Gulp 5 - оказался между Сциллой и Харибдой ((

1 лайк