How to implement multiple input and output of JS files in Gulp with ES6 Import/Export support?

Question

JavaScript

I'm building Gulp for a multi-page site. That is, my goal is to be able to work with several html files, connect my styles and js to each of them. It remains to implement multiple input and output of JS files with support for ES6 Import/Export.
That is, for example, I have the following structure of source js files:
index.js
about.js
modules/
----/module1.js
----/module2.js

That is, there are two files index.js and about. js that I include in the corresponding html, and in the modules folder there are modules that I import in the index.js and about.js files.
So far I'm processing them like this:

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())
}

Where paths.src.js is src/js/*.js, that is, only the main files, without modules.
At this stage, this allows me to move the index.js and about.js files, but it does not allow me to process the imports so that they fit into the correct files. I could transfer all files and the module folder as well, but this is not what I'm trying to achieve.
I tried using 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())
}

Already seeing the code, you can understand the header in the form of filename: `index.min.js`, that is, specifying one output file.
Webpack compiles all-all js files into one, which does not suit me.

Is there an option to achieve what I want, namely that something handles imports, but does not glue the source files, but displays them in their original quantity?

Answer 1

There seems to be a good solution:

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())
}

We connect vinyl-named.