使用 Gulp 运行 Webpack + Babel，但没有应用任何预设答案

【问题标题】：Using Gulp to run Webpack + Babel, but no presets are being applied使用 Gulp 运行 Webpack + Babel，但没有应用任何预设
【发布时间】：2016-05-12 09:44:29
【问题描述】：

我正在使用 Gulp 来运行 Webpack，因为 Gulp 中一些琐碎的事情在 Webpack 中却很混乱，例如多个输出。但是，babel-loader 似乎没有做任何事情。当我的脚本中有 JSX 时，我得到一个解析错误。当我使用 ES6/7 时，没有任何变化。

Gulp 任务如下：

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

是不是我做错了什么？

【问题讨论】：

标签： javascript node.js gulp webpack babeljs

【解决方案1】：

loaders 不应位于配置的顶层。它必须在module 内 - 试试这个：

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

【讨论】：