Question

我正在使用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/的根目录时工作正常，但在我尝试从其他网址访问应用时失败，例如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'));
});

基本上，我只需要得到这条线：

<script src="main...js"></script>

在源头开始有一个斜杠。

<script src="/main...js></script>

Answer 1

尝试在webpack配置中设置publicPath：

output.publicPath = '/'

HtmlWebpackPlugin使用publicPath来添加注入的URL。

另一个选项是在html模板的<head>中设置基本href，以指定文档中所有相对网址的基本网址。

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

Answer 2

事实上，我不得不说：

output.publicPath: './';

以使其在非ROOT路径中工作。同时我正在注射：

   baseUrl: './'

进入

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

使用这两个参数设置，它就像一个魅力。

Answer 3

在webpack配置中

config.output.publicPath = ''

在您的index.html

中

<base href="/someurl/" />

这应该做。

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

3 个答案: