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

我使用 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 文件，因为 response-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>
49120 次浏览
小开
最佳答案

尝试在 webpack 配置中设置 publicPath:

output.publicPath = '/'

HtmlWebpackPlugin 使用 publicPath 预置注入的 URL。

另一种选择是在 html 模板的 <head>中设置基 href，以指定文档中所有相对 URL 的基 URL。

<base href="http://localhost:3000/">
小开

事实上，我不得不写:

output.publicPath: './';

为了让它工作在一个非根路径。 与此同时，我在注射:

   baseUrl: './'

进入

<base href="<%= htmlWebpackPlugin.options.metadata.baseUrl %>">

两个参数都设置好了，效果非常好。

小开

在 webpack 配置中

config.output.publicPath = ''

在你的索引里

<base href="/someurl/" />

这个应该够了。


提交答案