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?

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?

• javascript
• node.js
• gulp
• webpack
• babeljs

1 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'));
});