Как с помощью gulp и webpack-stream собирать несколько отдельных JS?

Question

[Dymok]

В проекте нужно несколько небольших JS файлов для подключения к разным страницам.
Есть папка и папка js/parts. Хочу, чтобы каждый файл из js отдельно собирался и выгружался в папку dev со своими импортами из js/parts.
Сейчас есть такой gulp-таск для js:

spoiler

const gulp = require('gulp'),
    cfg = require('../package.json').config,
    webpackConfig = require('../webpack.config'),
    webpackProdConfig = require('../webpack-prod.config'),
    webpackStream = require('webpack-stream'),
    webpack = require('webpack'),
    minify = require('gulp-minifier');

//Build js for development
gulp.task('dev:js', function () {
    gulp.src(cfg.src_js + '/*.js')
        .pipe(webpackStream(webpackConfig, webpack))
        .on('error', function handleError() {
            this.emit('end'); // Recover from errors
        })
        .pipe(gulp.dest(cfg.dev_js))
});

//Build js for production
gulp.task('prod:js', function () {
    gulp.src(cfg.src_js + '/entry.js')
        .pipe(webpackStream(webpackProdConfig, webpack))
        .on('error', function handleError() {
            this.emit('end'); // Recover from errors
        })
        .pipe(minify({
            minify: true,
            minifyJS: {
                sourceMap: false
            }
        }))
        .pipe(gulp.dest(cfg.build_js));
});

и такой webpack-конфиг:

spoiler

// webpack.config.js
var webpack = require('webpack');

module.exports = {
    mode: 'development',
    entry: './src/js/entry.js',
    output: {
        filename: 'index.js',
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules)/,
                loader: 'babel-loader',
                query: {
                    presets: [
                        ['env', {modules: false}],
                    ],
                },
            },
        ],
    },
    plugins: [
    ],
    externals: {
        jquery: 'jQuery',
    },
    devtool: 'source-map'
};

И работает это только с одним entry.js
Как в gulp таске выбирать нужные js файлы понимаю, а как их передать webpack'у, чтобы он обработал каждый отдельно - нет. Возможно ли это и как, если да?
Спасибо.

Answer 1

[Никита Егоров]

Оф документация

В entry передаете несколько точек входа и все

entry: {
	messenger: './messenger',
	about: './about',
},

После к ним можно обращаться как к глобальным переменным.

Comments

[Dymok]

А никак нельзя передать из gulp'a в в webpack имя обрабатываемого файла? Чтобы не плодить много точек входа вручную

[Никита Егоров]

Dymok, то есть у вас есть допустим 20 файлов js, вы хотите что бы build был для каждого свой?

[Dymok]

Никита Егоров, только те, которые лежат непосредственно в папке js. Но да, для каждого свой

[Никита Егоров]

Dymok, Есть динамический импорт.

У вас есть index.js, в него у вас например импортированы 10 файлов. Но для работы сайта нужно только 5. Тогда вместо этого ->
const modal = require('modal.js)
Напишите так ->
const modal = () => import('modal');

Тем самым, webpack сбилдит отдельный файл modal.js, а когда нужно будет, подгрузит.

Если не подходит то вот несколько вариантов того как можно сделать разные build'ы - оф. документация

[wOneBvll]

нет, я просто не хочу писать для каждого файла точку входа вручную,
может быть есть какая то функция, метод, переменная, которая задает точки входа по опредленному параметру
в данном случае - все файлы без "_"
нашел на сайте вот такой пример, подойдет ли?

Answer 2

[Андрей Бодров]

...
  entry: {
    header: './src/js/parts/header.js',
    header: './src/js/parts/footer.js',
    // и ещё любое кол-во точек входа
  },
  output: {
    filename: '[name].js',
    path: __dirname + cfg.build_js,
  },
  ...