Webpack watch вылетает после ошибки в js-файле - PullRequest
Новая
       30

Webpack watch вылетает после ошибки в js-файле

0 голосов
/ 25 декабря 2018

Я создаю среду для объединения * .scss в main.css и * .js в main.js.Одновременно использует gulp и webpack.

Кажется, нет проблем с файлами scss (https://prntscr.com/lzexyt),, но если у меня есть ошибка в js-файлах (например, удалена фигурная скобка) - процесс завершается сбоем и останавливается (*)1006 *

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

Основной вопрос - как заставить веб-пакет продолжить просмотр js-файлов после ошибки, а также перестроить main.js и перезагрузить браузер после исправления ошибки (так же, как часы scss-css)

1 Ответ

0 голосов
/ 27 декабря 2018

Получил ответ - добавь после трубы вебпака 

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

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

...