D
D
Dymok2018-08-18 11:18:28
JavaScript
Dymok, 2018-08-18 11:18:28

How to bundle multiple separate JS with gulp and webpack-stream?

The project needs several small JS files to connect to different pages.
There is a folder and a js/parts folder. I want each file from js to be separately collected and uploaded to the dev folder with its imports from js/parts.
Now there is such gulp-task for 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));
});

and this webpack config:
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'
};


And it works only with one entry.js
. I understand how to select the necessary js files in the gulp task, but I don’t understand how to pass them to webpack so that it processes each one separately. Is this possible and how, if so?
Thank you.

Answer the question

In order to leave comments, you need to log in

2 answer(s)
N
Nikita Egorov, 2018-08-18
@UnluckySerivelha

Of documentation
In entry you pass several entry points and that's it

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

They can then be accessed as global variables.

A
Andrey Bodrov, 2018-08-18
@dagen

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

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question