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

最近弄了一个东西,需要gulp组合上webpack使用,然发现一个问题,两个webpack任务是无法同时进行的。
报错如下 :
You ran Webpack twice. Each instance only supports a single concurrent compilation at a time.
在这里插入图片描述

后来发现用上了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']);
});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值