使用 Webpack 开发服务器重新加载“子”页面不起作用答案

【问题标题】：Reloading 'sub' pages with Webpack dev server not working使用 Webpack 开发服务器重新加载“子”页面不起作用
【发布时间】：2017-11-03 01:44:18
【问题描述】：

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

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

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

【问题讨论】：

它似乎与 index.html 不完全相同，在重新加载场景中缺少脚本位，这就是为什么我得到一个空白页的解释。现在我只需要弄清楚为什么省略了脚本标签...

标签： webpack react-router webpack-2

【解决方案1】：

所以我意识到问题在于开发服务器返回的是原始 html 文件，而不是由 Webpack 编译的文件。有了这个，我又进行了一次谷歌搜索，并找到了一种更好的方法来设置开发服务器：

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）

【讨论】：