Question

我正在将项目从Gulp迁移到Webpack 2.这是一个客户端 - 服务器应用程序（使用express）。我必须在我的服务器中包含webpack中间件，并且还添加了这一点：

app.get('*', function (req, res) {
  res.sendFile(path.normalize(`${__dirname}/../client/index.html`));
});

现在，问题是，现在如果在应用程序中单击，事情正常，反应路由器加载子页面，所以一切正常。但是，如果我尝试重新加载任何这些子页面（如localhost：3000 / account等，我将得到一个空白页面）。我认为这是因为对于'*'，index.html被提供，在这种情况下不会呈现（不确定原因，但我可以看到正在显示的页面的来源，它是index.html）。我试图在开发服务器配置中包含historyApiFallback，但没有帮助。）

Answer 1

所以我意识到问题是devserver返回原始html文件而不是Webpack编译的文件。有了这个，我做了另一个谷歌搜索，找到了一个更好的方法来设置devserver：

app.use('*', function (req, res, next) {
  var filename = path.join(compiler.outputPath,'index.html');
  compiler.outputFileSystem.readFile(filename, function(err, result){
    if (err) {
      return next(err);
    }
    res.set('content-type','text/html');
    res.send(result);
    res.end();
  });
});

（见这里：https://github.com/jantimon/html-webpack-plugin/issues/145）

使用Webpack dev服务器重新加载“子”页面不起作用

1 个答案: