Webpack 网页包流/吞咽网页包未解析babel加载程序

我是中国人，很抱歉我的英语不好，提前谢谢你回答这个问题。

我正在使用gulp+webpack2构建前端。我想打包我的react项目。当我尝试使用webpack2捆绑它时，它是可以的。但当我尝试使用WebpackStream捆绑它时，出现了一些问题。网页包流似乎没有读取babel加载程序。

这是我的配置

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

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
    //   }
    // })
  ]
}

webpack.config.prod.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/'))
})

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"
  }
}

当我在windows命令提示符下运行

gulpbuild--prod

时，我遇到了这个问题

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)

---

当我运行

webpack--config=webpack.prod.js

时，它就工作了。但我更喜欢用gulp编译它

这里的问题是

webpack stream

仍然引用

webpack 1.*.

而不是

webpack 2.*.

解决方案是将

webpack2^

作为参数传递给gulpfile中

webpack流的构造函数

请看下面的示例：

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

这里的问题是
webpackstream
仍然引用
webpack1.*.
而不是
webpack2.*.

解决方案是将
webpack2^
作为参数传递给gulpfile中
webpack流的构造函数

请看下面的示例：

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

我需要在gulpfile中输入webpack2，并将其设置为webpackStream的第二个参数。我写的和你的一样，但它不起作用。看看你的行：“.pipe（gulpWebpack（webpackConfig），webpack）”，把它改为“.pipe（gulpWebpack（webpackConfig，webpack））”，这样你的webpack2^就作为webpack流的constructorI所需的webpack2的参数传入我的gulpfile，并将其设置为webpackStream的第二个参数。我写的和你的一样，但不起作用。看看你的行：“.pipe（gulpWebpack（webpackConfig），webpack）”，把它改为“.pipe（gulpWebpack（webpackConfig，webpack））”，这样你的webpack2^就作为参数传递给了webpack流的构造函数