webpack-stream/gulp-webpack不解析巴貝爾裝載機

Question

我是中國人，對不起我的英文不好，並且預先感謝回答這個問題。

我使用gulp + webpack2來構建前端。我想捆綁我的反應項目。當我嘗試使用webpack2捆綁它時沒關係。但是當我嘗試使用webpack-stream來捆綁它時會遇到一些問題。似乎webpack-stream不讀取babel-loader。

這是我的配置。

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

當我運行gulp build --prod在Windows命令提示符下，我得到這個問題

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編譯它。

Answer 1

這裏的問題是，webpack-stream仍然引用webpack 1.*.*而不是webpack 2.*.*。

解決方法是將webpack2^作爲參數傳遞給您的gulp文件中的webpack-stream的構造函數。

看一看下面這個例子：

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