HtmlWebpackPlugin注入相对路径文件，当加载非根网站路径时会出现问题。

Question

HtmlWebpackPlugin注入相对路径文件，当加载非根网站路径时会出现问题。

154

我正在使用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中寻找？或者我可以更改我的express服务器以解决此问题吗？

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>

- aherriot

3个回答

22

事实上，我不得不放置：

output.publicPath: './';

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

   baseUrl: './'

进入

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

两个参数都设置好后，它的工作非常顺利。

- Kevin FONTAINE

这会在浏览器上显示URL为https://localhost/myproject/%3C%=%20htmlWebpackPlugin.options.baseUrl%20%%3E#/project/1。有没有什么解决方法？ - NehaM

你在哪里设置 baseUrl: '.'，是在 HtmlWebpackPlugin 的选项中吗？{ meta: { baseUrl: './' } }？ - SomethingOn

@SomethingOn 我现在手头上没有这个webpack项目，而且我认为自从我发布这个答案以来很多东西都已经改变了（包括默认值）。所以是的，这肯定是应该设置的地方，但是'./'是正确的值。 - Kevin FONTAINE

1

现在它可以直接注入基础标签。注入基础标签 - Liang

愚蠢但确实有效的第二种方法。谢谢！ - cpinamtz

9

在webpack配置中

config.output.publicPath = ''

在你的 index.html 文件中。

<base href="/someurl/" />

这应该就可以了。

- hannad rehman

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Magnus Sjungare · Accepted Answer

尝试在你的webpack配置中设置publicPath:

output.publicPath = '/'

HtmlWebpackPlugin使用publicPath将注入的url前置。

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

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