Как в Gulp реализовать множественный вход и выход JS-файлов с поддержкой ES6 Import/Export?

Question

[KrisTeylor]

Делаю сборку Gulp для многостраничного сайта. То есть моя цель чтобы была возможность работать с несколькими html-файлами, к каждому из них подключать свои стили и свои js. Осталось реализовать множественный вход и выход JS-файлов с поддержкой ES6 Import/Export.
То есть, например, у меня есть такая структура исходных js-файлов:
index.js
about.js
modules/
----/module1.js
----/module2.js

То есть есть два файла index.js и about.js, которые я подключаю к соответствующим html, и в папке modules есть модули, которые я импортирую в файлах index.js и about.js.
Пока я обрабатываю их так:

export const js = () => {
    return app.gulp.src(app.paths.src.js, { sourcemaps: app.isDev })
        .pipe(babel())
        .pipe(app.gulp.dest(app.paths.build.js))
        .pipe(app.plugins.browserSync.stream())
}

Где paths.src.js, это src/js/*.js, то есть только главные файлы, без модулей.
На данном этапе это позволяет мне переносить файлы index.js и about.js, но не позволяет обработать импорты, так чтобы они вставились в нужные файлы. Я бы мог переносить все файлы и папку module в том числе, но это не то, чего я добиваюсь.
Я попытался использовать webpack:

export const js = () => {
    return app.gulp.src(app.paths.src.js, { sourcemaps: app.isDev })
        .pipe(babel())
        .pipe(webpack({
            mode: app.isBuild ? 'production' : 'development',
            output: {
                filename: `index.min.js`
            }
        }))
        .pipe(app.gulp.dest(app.paths.build.js))
        .pipe(app.plugins.browserSync.stream())
}

Уже видя код можно понять загвостку в виде filename: `index.min.js`, то есть указание одного выходного файла.
Webpack компилирует все-все js файлы в один, что меня не устраивает.

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

Comments

[Froggyweb]

для галпа адекватное решение https://webpack.js.org/guides/integrations/#gulp
если основа - js, то от gulp можно отказаться вообще.

[KrisTeylor]

Froggyweb, Порыскал там и нашёл решение. Спасибо большое!

Answer 1

[KrisTeylor]

Вроде есть подходящее решение:

import webpack from 'webpack-stream'
import babel from 'gulp-babel'
import named from 'vinyl-named'

export const js = () => {
    return app.gulp.src(app.paths.src.js, { sourcemaps: app.isDev })
        .pipe(app.plugins.plumber(
            app.plugins.notify.onError({
                title: 'JS',
                message: 'Error: <%= error.message %>'
            })
        ))
        .pipe(babel())
        .pipe(named())
        .pipe(webpack({
            mode: app.isBuild ? 'production' : 'development',
        }))
        .pipe(app.gulp.dest(app.paths.build.js))
        .pipe(app.plugins.browserSync.stream())
}

Подключаем vinyl-named.