How to set webpack config to output multiple js files?

Question

JavaScript

Let's say I don't want all my javascript to be collected in one bungle.js, I want to make each page have its own script file:

**build**
  js  
    home.js
    about.js
    contacts.js
  home.html
  about.html
  contacts.html
**src** 
  js 
    modules 
      _header.js 
      _modals.js 
      _jquery.js 
    home.js
    about.js
    contacts.js
  home.html
  about.html
  contacts.html

That is, I want webpack to collect several files, only files without "_" get into the build folder, and most importantly, so that I do not have to manually write all the entry points. Webpack should understand this itself
. The trick is that webpack (processes only js) is integrated into my gulp (img, fonts, scss, pug)
Here is the assembly:

// gulpfile.js
const gulp = require('gulp'),
      webpack = require('webpack'),
      webpack_stream = require('webpack-stream'),
      webpack_config = require('./webpack.config');
let path = {
  build: {
    fonts: 'build/fonts/',
    img: 'build/img/',
    css: 'build/css/',
    js: 'build/js/',
    html: 'build/',
  },
  src: {
    fonts: 'src/fonts/**/*',
    img: 'src/img/**/*.{jpg,png,svg,gif,ico,webp}',
    css: ['src/scss/**/*.scss', '!src/scss/**/_*.scss'],
    js: ['src/js/**/*.js', '!src/js/**/_*.js'],
    html: ['src/pug/**/*.pug', '!src/**/_*.pug', ]
  },
  watch: {
    fonts: 'src/fonts/**/*',
    img: 'src/img/**/*',
    css: 'src/scss/**/*',
    js: 'src/js/**/*',
    html: 'src/pug/**/*',
  },
}
function js() {
  return gulp.src(path.src.js)
    .pipe(sourcemaps.init())
    .pipe(webpack_stream(webpack_config, webpack))
    .pipe(sourcemaps.write())
    //.pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest(path.build.js))
    .pipe(browsersync.stream())

// webpack.config.js
module.exports = {
  output: {
    filename: '??????????' // вопрос тут
  },
  module: {
    rules: [{
      test: /\.(js)$/,
      loader: 'babel-loader',
      exclude: '/node_modules/',
    }]
  },
}
}