HtmlWebpackPlugin注入相对路径文件，该路径文件在加载非根网站路径时会中断

LEY宝儿神奇2020-03-23

我正在使用webpack和HtmlWebpackPlugin将捆绑的js和css注入html模板文件中。

new HtmlWebpackPlugin({
   template: 'client/index.tpl.html',
   inject: 'body',
   filename: 'index.html'
}),

并生成以下html文件。

<!doctype html>
<html lang="en">
  <head>
    ...
    <link href="main-295c5189923694ec44ac.min.css" rel="stylesheet">
  </head>
  <body>
    <div id="app"></div>
    <script src="main-295c5189923694ec44ac.min.js"></script>
  </body>
</html>

当访问应用程序的根目录时，此方法工作正常localhost:3000/，但是当我尝试从另一个URL访问应用程序时，此方法将失败，例如，localhost:3000/items/1因为捆绑的文件未注入绝对路径。加载html文件时，它将在不存在的/items目录中查找js文件，因为react-router尚未加载。

如何获得HtmlWebpackPlugin以绝对路径注入文件，所以express将在我的/dist目录的根目录而不是在目录的根目录查找文件/dist/items/main-...min.js？或者，也许我可以更改我的快速服务器以解决此问题？

app.use(express.static(__dirname + '/../dist'));

app.get('*', function response(req, res) {
  res.sendFile(path.join(__dirname, '../dist/index.html'));
});

本质上，我只需要了解以下内容：