How to make GULP 4 + Webpack + React JS friends?

Question

JavaScript

Hello!
In general, I’m trying to set up GULP to work with WebPack and React js, but on the first run everything is fine, but if you change some js or jsx file, then everything falls off

Uncaught SyntaxError: Unexpected token import

then says that

Uncaught Invariant Violation: There is no registered component for the tag div

.
The webpack itself reacts to changes in files after 5 times, it is not clear how to win.
I reviewed all the videos from Ilya Kantor https://www.youtube.com/playlist?list=PLDyvV36pndZ... and https://www.youtube.com/playlist?list=PLDyvV36pndZ...
Picked up the source https://github .com/iliyakan/gulp-screencast/blob/ma... and here https://github.com/iliyakan/gulp-screencast/blob/ma... but nothing sensible happens all the same problem.
Who cares to share a config that really works?
Code https://jsfiddle.net/j59f9ebv/

// Дефолтный шаблон, подлежит модификации под проект

import gulp from 'gulp';
import jade from 'gulp-jade';
import stylus from 'gulp-stylus';
// import csso from 'gulp-csso';
// import concat from 'gulp-concat';
import autoprefixer from 'gulp-autoprefixer';
import bs from 'browser-sync';
import debug from 'gulp-debug';
import sourcemaps from 'gulp-sourcemaps';
import del from 'del';
import sb2 from 'stream-combiner2';
import notify from 'gulp-notify';
import typograf from 'gulp-typograf';
// import babel from 'gulp-babel';
import wd from 'wiredep';
import csscomb from 'gulp-csscomb';
import useref from 'gulp-useref';
import webpack from 'webpack';
//import named from 'vinyl-named';
import gulplog from 'gulplog';
//const webpack = webpackStream.webpack;

const wpConfig  = {
  output: {
    path:  "/public",
    filename: "[name].js"
  },
  watch: true,
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /\.jsx?$/g,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
};

const combiner = sb2.obj;
const wiredep = wd.stream;

const typografConfig = {
  lang: 'ru',
  mode: 'digit',
  disable: ['ru/optalign/*'],
  enable: ['ru/nbsp/*'] };

// Styles
gulp.task('styles', () => combiner(
  gulp.src('src/styles/main.styl'),
  debug({ title: 'styles' }),
  sourcemaps.init(),
  debug({ title: 'stylus' }),
  stylus(),
  debug({ title: 'autoprefixer' }),
  autoprefixer({ browsers: ['last 15 versions'], cascade: false }),
  csscomb(),
  sourcemaps.write(),
  gulp.dest('public/styles/')
).on('error', notify.onError()));

// Jade
gulp.task('jade', () => combiner(
  gulp.src(['src/template/*.jade', '!src/template/_*.jade']),
  debug({ title: 'jade' }),
  jade({ pretty: true }),
  typograf(typografConfig),
  useref({ searchPath: ['app', '.'] }),
  gulp.dest('public')
).on('error', notify.onError()));

// Assets
gulp.task('assets', () => combiner(
  gulp.src('src/assets/**/*.*', { since: gulp.lastRun('assets') }),
  debug({ title: 'assets' }),
  gulp.dest('public')
).on('error', notify.onError()));

// Webpack
gulp.task('webpack', function(callback) {

  let options = {
    entry:   {
      main: './src/scripts/main',
    },
    output:  {
      path: './public/scripts/',
      filename: '[name].js'
    },
    watch: true,
    devtool: 'cheap-module-inline-source-map',
    module: {
      loaders: [
        {
          test: /\.jsx?$/g,
          loader: 'babel',
          query: {
            presets: ['react','es2015']
          }
        }
      ]
    },
    plugins: [
      new webpack.NoErrorsPlugin() // otherwise error still gives a file
    ]
  };


  webpack(options, function(err, stats) {

   /* if (!err) {
      err = stats.toJson().errors[0];
    }*/

    /*if (err) {
      notify.onError(err);
      gulplog.error(err);

    } else {
      gulplog.info(stats.toString({
        colors: true
      }));
    }*/

    if (!options.watch && err) {
      callback(err);
    } else {
      callback();
    }

  });

});

// Watch
gulp.task('watch', () => {
  gulp.watch('src/styles/**/*.styl', gulp.series('styles'));
  gulp.watch('src/template/**/*.jade', gulp.series('jade'));
  //gulp.watch(['src/scripts/**/*.js', 'src/scripts/**/*.jsx'], gulp.series('scripts'));
  gulp.watch('src/assets/**/*.*', gulp.series('assets'));
  gulp.watch('bower.json', gulp.series('wiredep'));
});

// Clean
gulp.task('clean', (callback) => {
  del('public');
  return callback();
});

// Build
gulp.task('build', gulp.series(
  gulp.parallel('styles', 'jade', 'assets')
));

// Serve
gulp.task('serve', () => {
  bs.init({ server: 'public' });
  bs.watch('public/**/*.*').on('change', bs.reload);
});

// Wiredep
gulp.task('wiredep', (callback) => {
  gulp.src('src/template/_layout.jade')
    .pipe(wiredep({ ignorePath: /^(\.\.\/)*\.\./ }))
    .pipe(gulp.dest('src/template'));
  callback();
});

// Start
gulp.task('start', gulp.series(
  'build',
  gulp.parallel('watch', 'serve')
));

Answer 1

I made friends, keep it:
https://github.com/slavikse/martyr/blob/master/.ma...
Connect React in .babelrc presets
https://github.com/slavikse/martyr/blob/master/.babelrc
One caveat, webpack itself monitors the scripts in gulp, you don’t need to write a listener.