Categories
Web blog

Using Webpack with Gulp to bundle JavaScript modules

I have been using Gulp for some years now but considered moving to Webpack in order to bundle JavsScript modules into a single transpiled file. Rather than replace all my Gulp tasks with Webpack (which personally, I find a little awkward), I instead opted to keep Gulp but using Webpack within a task when bundling JavaScript modules. This is pretty easy to setup, and give the best of both worlds in my opinion.

gulpfile.js

...
gulp.task('js', ['jest'], function() {
    return gulp.src(JSES_SRC)
        .pipe(webpack(require('./webpack.config.js')))
        .pipe(gulp.dest('./dist/js'));
});
...

webpack.config.js

const path = require('path');

module.exports = {
    entry: {
        "global": './src/js/global.bundle.js',
        //...
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist/js')
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader"
            }
        }],
    },
    mode: 'development',
    devtool: 'inline-source-map'
}

Leave a Reply

Your email address will not be published. Required fields are marked *