webpack和gulp组合使用,用gulp-sequence按顺序执行任务防止报错

最近弄了一个东西,需要gulp组合上webpack使用,然发现一个问题,两个webpack任务是无法同时进行的。
报错如下 :
You ran Webpack twice. Each instance only supports a single concurrent compilation at a time.
webpack和gulp组合使用,用gulp-sequence按顺序执行任务防止报错

后来发现用上了gulp-sequence,解决了该问题,此前还想到一种别的方法,目的也是监听变化文件并及时打包。

方法1:只打包变动的文件

gulp.config.js

module.exports = {
    entry:{
        'index':'./public/javascripts/page/index/index.js',
        'user':'./public/javascripts/page/user/index.js'
    }
}

gulpfile.js

const gulp = require('gulp');
const webpack = require('webpack');
const webpackStream = require('webpack-stream');
const gulpConfig = require('./gulp.config');
const gulpSequence = require('gulp-sequence');


let entry = gulpConfig.entry;
let packageTasks = [];

Object.keys(entry).forEach(function (key) {
    gulp.task('webpack-'+key,function () {
        return gulp.src(entry[key])
            .pipe(webpackStream({
                output:{
                    filename:'js/'+key+'.bundle.js'//打包后的名字
                }
            }))
            .pipe(gulp.dest('./public/dist'));
    });
    packageTasks.push('webpack-'+key);
});

gulp.task('watch',function () {
    Object.keys(entry).forEach(function (key) {
        gulp.watch(entry[key],['webpack-'+key]);
    });
});

方法2:监听到有变动全部重新打包(gulp-sequence)

gulpfile.js

const gulp = require('gulp');
const webpack = require('webpack');
const webpackStream = require('webpack-stream');
const gulpConfig = require('./gulp.config');
const gulpSequence = require('gulp-sequence');


let entry = gulpConfig.entry;
let packageTasks = [];

Object.keys(entry).forEach(function (key) {
    gulp.task('webpack-'+key,function () {
        return gulp.src(entry[key])
            .pipe(webpackStream({
                output:{
                    filename:'js/'+key+'.bundle.js'//打包后的名字
                }
            }))
            .pipe(gulp.dest('./public/dist'));
    });
    packageTasks.push('webpack-'+key);
});

gulp.task('js',gulpSequence(...packageTasks));

gulp.task('watch',function () {
    gulp.watch('./public/javascripts/page/**/index.js',['js']);
});