webpack-stream/gulp-webpack not parse babel loader

Question

I'm Chinese, sorry about my bad English, and thanks in advance to answer this question.

I'm using gulp + webpack2 to build front-end. And I want to bundle my react project. It's okay when I try to use webpack2 to bundle it. But there get some issue when I try to use webpack-stream to bundle it. seems the webpack-stream doesn't read the babel-loader.

Here is my configuration.

gulpfile.js

const args = require('yargs').argv
const path = require('path')
const gulp = require('gulp')
const $ = require('gulp-load-plugins')
const browserSync = require('browser-sync').create()
const reload = browserSync.reload
const webpack = require('webpack')
const gulpWebpack = require('webpack-stream')
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpackHotMiddleware = require('webpack-hot-middleware')
const historyApiFallback = require('connect-history-api-fallback')

let isProduction = !!args.prod

let webpackConfig = require(isProduction ? './webpack.config.prod.js' : './webpack.config.dev.js')
let bundler = webpack(webpackConfig)

gulp.task('build', () => {
  return gulp.src('./master/jsx/App.js')
    .pipe(gulpWebpack(webpackConfig), webpack)
    .pipe(gulp.dest('dist/'))
})

webpack.config.prod.js

const vendor = require('./vendor.json')
const webpack = require('webpack')
const path = require('path')

module.exports = {
  entry: {
    app: path.resolve(__dirname, 'master/jsx/App'),
    // vendor: vendor
  },
  output: {
    filename: 'app.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    rules: [{
      test: /\.js$/,
      use: [ 'babel-loader'],
      exclude: /node_modules/
    }, {
      test: /\.jsx$/,
      use: ['babel-loader'],
      exclude: /node_modules/
    }]
  },
  plugins: [
    // new webpack.optimize.CommonsChunkPlugin({
    //   name: 'vendor',
    //   filename: 'vendor.bundle.js'
    // }),
    // new webpack.optimize.OccurenceOrderPlugin(),
    // new webpack.optimize.UglifyJsPlugin({
    //   compressor: {
    //     warnings: false
    //   }
    // })
  ]
}

package.json

{
  "name": "GAD",
  "version": "0.0.1",
  "description": "git auto deployment",
  "main": "index.js",
  "repository": "http://192.168.2.253:3000/wuyuchang/GAD.git",
  "author": "wuyuchang <wuyc@caihuohuo.cn>",
  "license": "MIT",
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-router": "^3.0.2"
  },
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "babel-preset-stage-2": "^6.22.0",
    "browser-sync": "^2.18.8",
    "connect-history-api-fallback": "^1.3.0",
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-if": "^2.0.2",
    "gulp-less": "^3.3.0",
    "gulp-load-plugins": "^1.5.0",
    "gulp-uglify": "^2.0.1",
    "gulp-util": "^3.0.8",
    "gulp-webpack": "^1.5.0",
    "react-hot-loader": "3.0.0-beta.6",
    "react-loader": "^2.4.0",
    "webpack": "^2.2.1",
    "webpack-dev-middleware": "^1.10.0",
    "webpack-dev-server": "^2.3.0",
    "webpack-hot-middleware": "^2.16.1",
    "webpack-stream": "^3.2.0",
    "yargs": "^6.6.0"
  },
  "scripts": {
    "test": "gulp browsersync",
    "start": "gulp build",
    "dev": "webpack-dev-server --config=webpack.config.dev.js",
    "build": "webpack --config=webpack.config.prod.js"
  }
}

.babelrc

{
  "presets": [
    ["es2015", {"modules": false}],
    "stage-2",
    "react"
  ],
  "plugins": [
    "react-hot-loader/babel"
  ]
}

When I run gulp build --prod in windows command prompt, I get that issue

C:\Users\ou_di\www\GAD>gulp build --prod
[18:00:54] Using gulpfile ~\www\GAD\gulpfile.js
[18:00:54] Starting 'build'...

stream.js:74
      throw er; // Unhandled stream error in pipe.
      ^
Error: ./master/jsx/App.jsx
Module parse failed: C:\Users\ou_di\www\GAD\master\jsx\App.jsx Unexpected token (10:2)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (10:2)
    at Parser.pp$4.raise (C:\Users\ou_di\www\GAD\node_modules\webpack-stream\node_modules\acorn\dist\acorn.js:2221:15)
    at Parser.pp.unexpected (C:\Users\ou_di\www\GAD\node_modules\webpack-stream\node_modules\acorn\dist\acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (C:\Users\ou_di\www\GAD\node_modules\webpack-stream\node_modules\acorn\dist\acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (C:\Users\ou_di\www\GAD\node_modules\webpack-stream\node_modules\acorn\dist\acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (C:\Users\ou_di\www\GAD\node_modules\webpack-stream\node_modules\acorn\dist\acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (C:\Users\ou_di\www\GAD\node_modules\webpack-stream\node_modules\acorn\dist\acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (C:\Users\ou_di\www\GAD\node_modules\webpack-stream\node_modules\acorn\dist\acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (C:\Users\ou_di\www\GAD\node_modules\webpack-stream\node_modules\acorn\dist\acorn.js:1597:21)
    at Parser.pp$3.parseParenAndDistinguishExpression (C:\Users\ou_di\www\GAD\node_modules\webpack-stream\node_modules\acorn\dist\acorn.js:1861:32)
    at Parser.pp$3.parseExprAtom (C:\Users\ou_di\www\GAD\node_modules\webpack-stream\node_modules\acorn\dist\acorn.js:1796:19)

When I just run webpack --config=webpack.prod.js, then it's work. But I prefer to use gulp compile it.

Answer 1

The issue here is that webpack-stream still references webpack 1.*.* and not webpack 2.*.*.

A solution is to pass webpack2^ as a parameter to your webpack-stream's constructor in your gulpfile.

Have a look at this example below:

var webroot = './wwwroot/'; //Path to root...

var gulp = require('gulp');
var webpackConfig= require('./webpack.config.js');
var webpack = require('webpack');
var webpackStream = require('webpack-stream');

gulp.task('webpack', function () {
    return gulp.src(webroot + 'js/**/*.jsx')
        .pipe(webpackStream(webpackConfig, webpack))
        .pipe(gulp.dest(webroot + 'js/'));
});