reload happening before webpack build finished

[danlbob]

Hey,

I'm trying to proxy a wordpress server in my browsersync configuration. Everything almost works but browser sync reloads before the webpack build is finished. If I make a change, then save the file, the browser refreshes and I see the old content. If I save again (or manually refresh), the browser will refresh and show the changes. Here's my webpack configuration.

var debug = process.env.NODE_ENV !== 'production';
var webpack = require('webpack');
var path = require('path');
var BrowserSyncPlugin = require('browser-sync-webpack-plugin');

var webpackSettings = {
  context: path.join(__dirname, 'src'),
  devtool: debug ? "inline-sourcemap" : null,
  entry: './scripts/main.jsx',
  output: {
    path: __dirname + '/dist/scripts/',
    filename: 'main.min.js'
  },
  plugins: debug ? [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.NoErrorsPlugin(),
    new BrowserSyncPlugin({
      host: 'localhost',
      port: 3000,
      proxy: 'http://local.php.server.address/'
    })
  ] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
  resolve: {
    extensions: ['', '.js', '.jsx', ]
  },
  debug: debug,
  module: {
    loaders: [{
      test: /\.jsx?/,
      exclude: /(node_modules|bower_components)/,
      loaders: ['babel?presets[]=react,presets[]=es2015'],
    },
    {
      test: /\.scss$/,
      loaders: [ 'style', 'css?sourceMap', 'sass?sourceMap' ]
    }],
  }
};
module.exports = webpackSettings

and I execute using webpack --watch

apologies if this is outside of the scope of this plugin. Thanks! * edit: clarified issue

[Va1]

@danlbob hey! I had a look into your configuration and it looks OK to me, as browsersync reloads only after compilation is complete, everything should work fine. I haven no idea why it fails, I need to make some experiments with the setup of your style. Hopefully will return to you on Monday with some results.

Let me know if this is not actual already.

[itzikbenh]

I have the same issue exactly. Webpack is just extremely slow and browsersync is just impatient :). The only way to solve this is to specify the files you want to watch with BrowserSync. Don't watch the assets that needs to be compiled.

Here's my config:

new BrowserSyncPlugin({
    proxy: 'localhost:8888',
    port: 3000,
    files: [
        '**/*.php'
    ],
    ghostMode: {
        clicks: false,
        location: false,
        forms: false,
        scroll: false
    },
    injectChanges: true,
    logFileChanges: true,
    logLevel: 'debug',
    logPrefix: 'wepback',
    notify: true,
    reloadDelay: 0
})

[danlbob]

In my case I think the delay is due to sync lag that occurs with the docker environment I am proxying. So, yeah the only solution I've found is to add a delay of a few seconds. Annoying but probably not a Browsersync issue.