要求
我需要运行 webpack-dev-server 并等待服务器准备好提供页面。
解决方案
// Start a webpack-dev-server
new WebpackDevServer(webpack(myConfig), {
publicPath: myConfig.output.publicPath,
hot: true,
historyApiFallback: true,
// It suppress error shown in console, so it has to be set to false.
quiet: false,
// It suppress everything except error, so it has to be set to false as well
// to see success build.
noInfo: false,
stats: {
// Config for minimal console.log mess.
assets: false,
colors: true,
version: false,
hash: false,
timings: false,
chunks: false,
chunkModules: false
}
}).listen(3000, '0.0.0.0', function(err) {
if(err) throw new gutil.PluginError('webpack-dev-server', err);
gutil.log('[webpack-dev-server]', 'http://0.0.0.0:3000/webpack-dev-server/index.html');
//this is to ensure that end to end test wouldn't start running until the server is ready
http.get({
hostname: '0.0.0.0',
port: 3000,
path: '/',
agent: false // create a new agent just for this one request
}, (/*res*/) => {
// Do stuff with response
done();
});
});
问题
在 Linux 上等待服务器准备就绪。在 Windows 上我得到一个异常,因为没有等待并且服务器没有准备好
C:\development\ucms-react>gulp webpack-dev-server [11:03:01] Requiring external module babel-register [11:03:07] Using gulpfile C:\development\ucms-react\gulpfile.babel.js [11:03:07] Starting 'webpack-dev-server'... [11:03:07] [webpack-dev-server] http://0.0.0.0:3000/webpack-dev-server/index.html error events.js:141 throw er; // Unhandled 'error' event ^
Error: connect EADDRNOTAVAIL 0.0.0.0:3000 at Object.exports._errnoException (util.js:907:11) at exports._exceptionWithHostPort (util.js:930:20) at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1077:14)
C:\development\ucms-react>
我该如何解决这个问题?
最佳答案
Brett DeWoody 的另一个答案部分正确。它会正确地等到服务器启动。但是,这不会等待创建 bundle 。因此,如果此时您向 webpack 请求一个页面,它会返回类似于“仍在编译”的内容。
要在尝试访问页面之前等待包完全编译(并且服务器正在监听),您需要这样的东西:
function makeServer(config) {
return new Promise((resolve, reject) => {
const compiler = webpack(config);
let compiled = false;
let listening = false;
compiler.hooks.done.tap('IDoNotUnderstandWhatThisStringIsForButItCannotBeEmpty', () => {
// console.log('compiled');
if (listening) resolve(server);
else compiled = true;
});
const server = new WebpackDevServer(compiler, config.devServer);
server.listen(port, '0.0.0.0', err => {
if (err) return reject(err);
// console.log('listening');
if (compiled) resolve(server);
else listening = true;
});
});
}
然后,就像Brett的回答一样,await
结果:
var server = await makeServer(config);
或者没有async
/await
:
makeServer(config).then(server => {
// Do something with server
});
关于javascript - 等到 Webpack 开发服务器准备就绪,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42940550/