2017-03-15 21 views
0

- 私はホットバンドル用のWebPACK-devのサーバーとリロード使用する方法を理解しようとしていると私はreact-redux-universal-hot-exampleから次のコードを得た:webpack-dev-server inside express?

var Express = require('express'); 
var webpack = require('webpack'); 

var config = require('../src/config'); 
var webpackConfig = require('./dev.config'); 
var compiler = webpack(webpackConfig); 

var host = config.host || 'localhost'; 
var port = (Number(config.port) + 1) || 3001; 
var serverOptions = { 
    contentBase: 'http://' + host + ':' + port, 
    quiet: true, 
    noInfo: true, 
    hot: true, 
    inline: true, 
    lazy: false, 
    publicPath: webpackConfig.output.publicPath, 
    headers: {'Access-Control-Allow-Origin': '*'}, 
    stats: {colors: true} 
}; 

var app = new Express(); 

app.use(require('webpack-dev-middleware')(compiler, serverOptions)); 
app.use(require('webpack-hot-middleware')(compiler)); 

app.listen(port, function onAppListening(err) { 
    if (err) { 
    console.error(err); 
    } else { 
    console.info('==> Webpack development server listening on port %s', port); 
    } 
}); 

質問:

A)なぜこのコードが呼んでいますvar app = Express()エクスプレスサーバーを停止するには? webpack-dev-serverはサーバー自体ではありませんか? WebPACKの-devのサーバーから

B)私は次のように気にいらを期待:

var WebpackDevServer = require("webpack-dev-server"); 
var webpack = require("webpack"); 
var fs = require("fs"); 

var compiler = webpack({ 
    // configuration 
}); 
var server = new WebpackDevServer(compiler, { 
    // webpack-dev-server options 
}) ; 

なぜ反応し-Reduxのユニバーサル・ホット例は特急(の新しいインスタンス内でそれをやっていますか)?

c)webpack-dev-serverのこの種の使用に関するドキュメントまたはチュートリアルはありますか?

助けてくれてありがとう - 私はここで混乱しています。

答えて

0

は限りあなたが見るように、あなたのアプリケーションは、それが明示ミドルウェアシステムを有するそれを設定するだけで簡単ですミドルウェア

app.use(require('webpack-dev-middleware')(compiler, serverOptions)); 
app.use(require('webpack-hot-middleware')(compiler)); 

のペアが必要です。 例がある良い文書がありますhttps://webpack.github.io/docs/webpack-dev-server.html