Gulp webpack-dev-server：捆绑完成前的回调

Question

我试图在Gulp中向webpack-dev-server模块添加回调。回调的目标是通知用户启动开发服务器的URL。问题是在捆绑过程完成之前调用回调。

如果我添加一个有效的固定超时，但这显然是不受欢迎的。

问题：我是否对回调结构做错了什么？为什么在捆绑完成之前调用它？

我在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/');
  }
});

当前输出：

[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.

我期待的是：

[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/

艾伦

Answer 1

尝试配置devWebpackConfig以使用'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); }
});

Answer 2

查找答案（适用于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 );
      }
    } );
  } );
};

输出如下：

[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/

标准＆＃39;已完成＆＃39;事件在捆绑构建过程之前被触发，并且没有帮助......