gulp與webpack-stream集成配置

webpack很是強大,可是也有不足的地方,批量式處理依然是gulp更勝一籌.咱們是否能夠將二者的優勢結合起來呢? 這篇文章就是講述如何集成gulp和webpack

1.安裝webpack-stream

很重要的插件,固然也能夠直接使用官方的webpack,集成方式能夠看webpack官網. 但webpack-stream更符合gulp的流語法.

sudo npm install --save webpack-stream vinyl-named

windows用戶去掉sudo, vinyl-named用來保持輸入和輸出的文件名相同, 不然會自動生成一個hash.

2.配置文件的編寫:

gulpfile.js

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

gulp.task('webpack', function() {
  return gulp.src('./www/src/main.jsx')
    .pipe(named())
    .pipe(webpack(webpackConfig))
    .pipe(gulp.dest('./www/build/'));
});

webpack.config.js

注意:用webpack-stream不須要配置entry和output

module.exports = {
    watch: true,
    devtool: "source-map",
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [{
            test: /\.jsx$/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015', 'react']
            }
        }, {
            test: /\.js$/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015']
            }
        }]
    }
};