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

114

我正在使用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'));
});

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

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

在源代码的开头加上斜线。

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

— 英雄
source

199

尝试在Webpack配置中设置publicPath：

output.publicPath = '/'

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

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

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

— 马格努斯·琼格
source

7

谢谢，添加output.publicPath = '/'是解决方案。

— aherriot

3

如果您在反向代理后面运行，这将不起作用。

— t-my

4

您也可以简单<base href="https://stackoverflow.com/">地避免在HTML模板中对主机名进行硬编码或对变量进行插值。

— 拉法

我必须设置publicPath =”并添加<base href =“〜/ dist /”>，因为我的站点是使用IIS和虚拟目录的ASP.Net MVC项目。

— 更紧急的笑话

16

实际上，我不得不输入：

output.publicPath: './';

为了使其在非ROOT路径下正常工作。同时，我正在注射：

   baseUrl: './'

进入

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

设置了两个参数后，它就像一个魅力。

— 凯文·方丹
source

这URL在浏览器上显示为https://localhost/myproject/%3C%=%20htmlWebpackPlugin.options.baseUrl%20%%3E#/project/1。有什么办法可以解决这个问题？

— NehaM

您baseUrl: '.'在HtmlWebpackPlugin选项中在哪里设置？{ meta: { baseUrl: './' } }？

— SomethingOn

@SomethingOn我现在没有这个webpack项目，自发布此答案（包括默认值）以来，我认为很多事情已经改变。是的，这当然是应该设置的地方，但'./'它是正确的值。

— 凯文·冯塔恩18/12/11

1

现在，它可以直接注入基础标签。注入基本标签

— 梁

2

在webpack配置中

config.output.publicPath = ''

在您的index.html中

<base href="/someurl/" />

这应该做到。

— 汉娜·雷曼
source