我正在使用 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 文件加载时，它会在 non-exist/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'));
});
本质上，我只需要得到这条线：
<script src="main...js"></script>
在源的开头有一个斜线。
<script src="/main...js></script>