UnluckySerivelha
@UnluckySerivelha

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

В проекте нужно несколько небольших 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'у, чтобы он обработал каждый отдельно - нет. Возможно ли это и как, если да?
Спасибо.
  • Вопрос задан
  • 2227 просмотров
Решения вопроса 1
Оф документация

В entry передаете несколько точек входа и все
entry: {
	messenger: './messenger',
	about: './about',
},


После к ним можно обращаться как к глобальным переменным.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
dagen
@dagen
JavaScript developer
...
  entry: {
    header: './src/js/parts/header.js',
    header: './src/js/parts/footer.js',
    // и ещё любое кол-во точек входа
  },
  output: {
    filename: '[name].js',
    path: __dirname + cfg.build_js,
  },
  ...
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы