js文件

Question

我创建了将* .scss合并到main.css和将* .js合并到main.js的环境。同时使用gulp和webpack。

scss文件（https://prntscr.com/lzexyt）似乎没有问题，但是如果我在js文件中有错误（例如，删除了大括号），则进程崩溃并停止（https://prntscr.com/lzf14w）。

gulpfile.js

'use strict';

const gulp = require('gulp'),
      sass = require('gulp-sass'),
      autoprefixer = require('gulp-autoprefixer'),
      browserSync = require('browser-sync').create(),
      webpack = require('webpack'),
      webpackStream = require('webpack-stream'),
      rename = require('gulp-rename'),
      uglify = require('gulp-uglify');

sass.compiler = require('node-sass');

gulp.task('sass', function () {
  return gulp.src('./src/scss/**/*.scss')    
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({
            browsers: ['last 10 versions'],
            cascade: false
        }))
    .pipe(sass({outputStyle: 'compressed'}))
    .pipe(gulp.dest('./public'))
    .pipe(browserSync.stream());
});

gulp.task('serve', function() {
    browserSync.init({
        server: "./public"
    });

    gulp.watch("public/*.html").on('change', browserSync.reload);
    gulp.watch("public/*.js").on('change', browserSync.reload);

});

gulp.task('scripts', function () {
  return gulp.src('./src/js/*.js')
    .pipe(webpackStream({
      module: {

        rules: [
          {
            test: /\.(js)$/,
            exclude: /(node_modules)/,
            loader: 'babel-loader',
            query: {
              presets: ["@babel/preset-env"]
            }
          }
        ]
      },

      output: {
        path: __dirname + '/public',
        filename: 'main.js'
      }
    }))
    .pipe(gulp.dest('./public'))
    .pipe(uglify())
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest('./public'))
    .pipe(browserSync.stream());
});

gulp.task('default', gulp.parallel('serve', function() {   
    gulp.watch('./src/scss/**/*.scss', gulp.series('sass'));
    gulp.watch('./src/js/*.js', gulp.series('scripts'))
}))

package.json

{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.2.3",
    "babel-loader": "^8.0.4",
    "babel-preset-env": "^1.7.0",
    "browser-sync": "^2.26.3",
    "gulp": "^4.0.0",
    "gulp-autoprefixer": "^6.0.0",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^4.0.2",
    "gulp-uglify": "^3.0.1",
    "node-sass": "^4.11.0",
    "webpack": "^4.28.2",
    "webpack-stream": "^5.2.1"
  },
  "dependencies": {}
}

package-lock.json（如果需要） https://drive.google.com/open?id=1PSNT8O43x4X1CWKExhS7ea3KKWQbw9MV

文件夹层次结构https://prntscr.com/lzfmvl

主要问题-如何使webpack在出现错误后继续观看js文件，并在修复错误后重新构建main.js并重新加载浏览器（就像scss-css watch一样）？

Answer 1

获得答案-在webpack的管道之后添加

.on('error', function handleError() {
      this.emit('end'); // Recover from errors
    })

https://github.com/shama/webpack-stream/issues/34#issuecomment-171644957