Using Gulp to run Webpack + Babel, but no presets are being applied

Question

I'm using Gulp to run Webpack because some things that are trivial with Gulp are messy with Webpack, such as multiple outputs. However, babel-loader doesn't seem to be doing anything. When I have JSX in my scripts, I get a parse error. When I use ES6/7, nothing is transformed.

Here's the Gulp task:

gulp.task('js', function() {
    return gulp.src('js/*.js')
        .pipe(webpack({
            loaders: [{
                test: /.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                  presets: ['es2015', 'stage-0', 'react']
                }
            }],
            output: {
                filename: '[name].js'
            }
        }))
        .pipe(gulp.dest('public/js'));
});

Is there something I'm doing wrong?

Answer 1

loaders shouldn't be at the top level of your configuration. It needs to be within module - try this:

gulp.task('js', function() {
    return gulp.src('js/*.js')
        .pipe(webpack({
            module: {
                loaders: [{
                    test: /.jsx?$/,
                    loader: 'babel-loader',
                    exclude: /node_modules/,
                    query: {
                        presets: ['es2015', 'stage-0', 'react']
                    }
                }]
            },
            output: {
                filename: '[name].js'
            }
        }))
        .pipe(gulp.dest('public/js'));
});