Question

我试图了解如何使用webpack-dev-server进行热捆绑和重新加载，我从react-redux-universal-hot-example获得了以下代码：

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不是服务器本身吗？

b）从webpack-dev-server我想到的东西如下：

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
}) ;

为什么react-redux-universal-hot-example在express（）的新实例中执行？

c）是否有此类webpack-dev-server使用的文档或教程？

感谢您的帮助 - 我在这里很困惑。

Answer 1

据您所知，您的应用程序需要一对中间件

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

使用快速中间件系统设置它更容易。有一个包含示例https://webpack.github.io/docs/webpack-dev-server.html

的文档

webpack-dev-server里面快递？

1 个答案: