gulp webpack-dev-server：bundle完成之前的callback

我正在尝试添加一个callback到Gulp中的webpack-dev-server模块。 callback函数的目标是通知用户启动dev服务器的URL。 问题是在捆绑过程完成之前调用callback。

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

问题：我在callback结构中做了什么错误？ 为什么在捆绑完成之前调用它？

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

电stream输出：

 [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

尝试configurationdevWebpackConfig以使用“完成”插件 。

 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/ 

标准“完成”事件在捆绑build立过程之前被解雇，并且不帮忙…