Gulp webpack-dev-server: callback before bundle is finished

Question

I'm trying to add a callback to the webpack-dev-server module in Gulp. The callback has as a goal to notify users the URL where the dev server is started. The issue is that the callback is invoked before the bundling process finishes.

If I add a fixed timeout that works, but this is clearly undesired.

Question: Am I doing something wrong with the callback structure? Why is that being called before the bundle is finished?

My code in Gulp:

var server = new WebpackDevServer(webpack(devWebpackConfig), devServerConfig);
server.listen(options.devServerPort || 8080, 'localhost', function(err) {
  if(err) {
    console.error('[webpack-dev-server] failed to start:', err);
  } else {
    console.log('[webpack-dev-server] started:', 'Browse to http://localhost:'+ options.devServerPort +'/webpack-dev-server/');
  }
});

Current output:

[14:43:43] Finished 'dev' after 66 ms
[webpack-dev-server] started: Browse to http://localhost:8002/webpack-dev-server/
Hash: 638bdaa3201a4220c58e
Version: webpack 1.9.5
Time: 7315ms
                                Asset     Size  Chunks             Chunk Names
c91905265455192ab6ea13d95c9edc63.woff  42.6 kB          [emitted]  
b09bad3c727751c808f224df00c208f8.woff  99.6 kB          [emitted]  
                             index.js  4.83 MB    0, 1  [emitted]  styles, app
chunk    {0} index.js (styles) 117 kB [rendered]
.....
webpack: bundle is now VALID.

What I'm expecting:

[14:43:43] Finished 'dev' after 66 ms
Hash: 638bdaa3201a4220c58e
Version: webpack 1.9.5
Time: 7315ms
                                Asset     Size  Chunks             Chunk Names
c91905265455192ab6ea13d95c9edc63.woff  42.6 kB          [emitted]  
b09bad3c727751c808f224df00c208f8.woff  99.6 kB          [emitted]  
                             index.js  4.83 MB    0, 1  [emitted]  styles, app
chunk    {0} index.js (styles) 117 kB [rendered]
...
webpack: bundle is now VALID.
[webpack-dev-server] started: Browse to http://localhost:8002/webpack-dev-server/

Alan

This is a good question. I couldn't find a definitive enough answer, but I'll share what I did find. It would appear that you've technically setup the server, and you log your message in the callback to `.listen`, but webpack hasn't actually finished it's first build, which happens asynchronously. You can listen in on the stats callback shown [here](http://webpack.github.io/docs/node.js-api.html#compiler). That said, you might lose the default format, and I'm not sure how it'd work out with the dev-server. Good luck, hopefully this gets you in the right direction! — Brennan, May 14 '15 at 04:58

score 1 · Answer 1 · answered Oct 17 '15 at 14:56

Try configuring devWebpackConfig to use the 'done' plugin.

var compiler = webpack(devWebpackConfig);
compiler.plugin('done', function() {
  console.log("started: Browse to http://localhost:8002/webpack-dev-server/")
});

var server = new WebpackDevServer(compiler);
server.listen(options.devServerPort || 8080, 'localhost', function(err) {
  if (err) { console.error('[webpack-dev-server] failed to start:', err); }
});

user1356144 · Answer 2 · 2016-02-24T11:08:43.140

Find answer (works on MAC OS)

// Dependency
var gulp = require( 'gulp' );
var gutil = require( 'gulp-util' );
var webpack = require( 'webpack' );
var localIp = require( './local-ip' );
var webpackConfig = require( './webpack.config.js' );
var WebpackDevServer = require( 'webpack-dev-server' );

// Private methods
var hook_stream = function( stream, data, cb ) {
  // Reference default write method
  var old_write = stream.write;

  // Clear hook function
  var clear_hook = function() {
    stream.write = old_write;
  };

  // New stream write with our shiny function
  stream.write = function() {
    // Old behaviour
    old_write.apply( stream, arguments );
    // Hook
    if ( arguments[ 0 ] === data ) {
      clear_hook();
      cb();
    }
  };
};

// Public register task method
module.exports = function( ops ) {
  gulp.task( 'server', function() {
    var config = Object.create( webpackConfig( ops ) );

    config.plugins.push( new webpack.HotModuleReplacementPlugin() );
    config.plugins.push( new webpack.NoErrorsPlugin() );
    config.entry.push( 'webpack/hot/dev-server' );
    config.devtool = 'eval';
    config.inline = true;

    var server = new WebpackDevServer( webpack( config ), {
      contentBase: './build',
      publicPath: '',
      hot: true,
      debug: true,
      inline: true,
      stats: {
        colors: true
      },
      watchOptions: {
        aggregateTimeout: 300,
        poll: 1000
      },
      plugins: [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin()
      ]
    } );

    server.listen( 9999, localIp, function( err ) {
      hook_stream( process.stdout, 'webpack: bundle is now VALID.\n', function() {
        gutil.log( '[dev-server]', gutil.colors.yellow( 'http://' + localIp + ':9999/webpack-dev-server/' ) );
      } );

      if ( err ) {
        console.log( err );
      }
    } );
  } );
};

Output looks like:

[19:58:01] Starting 'default'...
[19:58:01] Starting 'clean'...
[19:58:02] Finished 'clean' after 8.38 ms
[19:58:02] Starting 'index'...
[19:58:02] Finished 'index' after 3.92 ms
[19:58:02] Starting 'server'...
[19:58:02] Finished 'server' after 114 ms
[19:58:02] Finished 'default' after 132 ms
Hash: 23d12aadd47f52fbdf7c
Version: webpack 1.12.9
Time: 2478ms
  Asset    Size  Chunks             Chunk Names
model.js  2.1 MB       0  [emitted]  main
chunk    {0} model.js (main) 2.01 MB [rendered]
    [0] multi main 40 bytes {0} [built]
  ...
  [252] (webpack)/hot/dev-server.js 1.85 kB {0} [built]
  [253] (webpack)/hot/log-apply-result.js 813 bytes {0} [built]
webpack: bundle is now VALID.
[19:58:04] [dev-server] http://192.168.6.115:9999/webpack-dev-server/

Standard 'done' event fired before bundle building process, and don\'t help...

Gulp webpack-dev-server: callback before bundle is finished

My code in Gulp:

Current output:

What I'm expecting:

2 Answers2