Невозможно сделать webpack + gulp добавить Javascript в браузер после изменений в src - PullRequest
0 голосов
/ 05 июня 2019

После запуска gulp watch сервер live live работает.Если я внесу изменения в JS ничего не произойдет.Мне нужно увидеть изменения в браузере после изменения JS.Я не могу использовать другой метод, такой как webpack-dev-server, потому что я хочу использовать gulp watch для scss, img и других задач.После изменений в JS похоже, что что-то вычисляется ([Browsersync] Перезагружает браузеры ...) и блокирует следующие изменения.

const gulp = require("gulp")
const webpack = require('webpack')
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpackHotMiddleware = require('webpack-hot-middleware')
const browserSync = require('browser-sync').create()

const webpackConfigDev = {
  entry: {
    main: [
      './src/js/main.js',
      'webpack/hot/dev-server',
      'webpack-hot-middleware/client'
    ]
  },
  output: {
    path: __dirname + 'dist/js',
    filename: 'main.js'
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
  ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
}

gulp.task('webpack', function () {
  return new Promise(resolve => webpack(config, (err, stats) => {

    if (err) console.log('Webpack', err)

    console.log(stats.toString({ /* stats options */ }))

    resolve()
}))
})

//  watch functions
function serve() {
  return browserSync.init({
    server: './dist',
    port: 4500,
    open: true,
    middleware: [
        webpackDevMiddleware(webpack(webpackConfigDev), { /* options */ }),
        webpackHotMiddleware(webpack(webpackConfigDev))
    ],
  });
}

gulp.task('watch', function() {
  serve()

  gulp.watch("./src/js/**/*.js", gulp.series(browserSync.reload))
});

gulp.task('watch', gulp.series('watch'))

Заранее спасибо.

...