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.


gulp.task('js', ['jest'], function() {
    return gulp.src(JSES_SRC)


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 *