首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >HtmlWebpackPlugin注入加载非根网站路径时中断的相对路径文件

HtmlWebpackPlugin注入加载非根网站路径时中断的相对路径文件
EN

Stack Overflow用户
提问于 2016-01-06 04:27:35
回答 3查看 44.7K关注 0票数 134

我正在使用webpack和HtmlWebpackPlugin将捆绑的js和css注入到一个html模板文件中。

代码语言:javascript
复制
new HtmlWebpackPlugin({
   template: 'client/index.tpl.html',
   inject: 'body',
   filename: 'index.html'
}),

并生成以下html文件。

代码语言:javascript
复制
<!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/访问应用程序时失败,因为捆绑的文件不是通过绝对路径注入的。加载html文件时,它将在不存在的/items目录中查找js文件,因为react-router尚未加载。

如何让HtmlWebpackPlugin注入具有绝对路径的文件,这样express将在我的/dist目录的根目录而不是/dist/items/main-...min.js中查找它们?或者我可以改变我的express服务器来解决这个问题?

代码语言:javascript
复制
app.use(express.static(__dirname + '/../dist'));

app.get('*', function response(req, res) {
  res.sendFile(path.join(__dirname, '../dist/index.html'));
});

从本质上讲,我只需要得到这行代码:

代码语言:javascript
复制
<script src="main...js"></script>

在源代码的开头有一个斜杠。

代码语言:javascript
复制
<script src="/main...js></script>
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-01-06 15:47:52

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

代码语言:javascript
复制
output.publicPath = '/'

HtmlWebpackPlugin使用publicPath作为注入urls的前缀。

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

代码语言:javascript
复制
<base href="http://localhost:3000/">
票数 228
EN

Stack Overflow用户

发布于 2016-12-01 17:26:14

事实上,我不得不说:

代码语言:javascript
复制
output.publicPath: './';

以使其在非根路径下工作。同时我还注射了:

代码语言:javascript
复制
   baseUrl: './'

转到

代码语言:javascript
复制
<base href="<%= htmlWebpackPlugin.options.metadata.baseUrl %>">

有了这两个参数设置,它就像一个魔咒一样工作。

票数 19
EN

Stack Overflow用户

发布于 2018-07-23 21:26:11

在webpack配置中

代码语言:javascript
复制
config.output.publicPath = ''

在你的index.html中

代码语言:javascript
复制
<base href="/someurl/" />

这个应该可以了。

票数 6
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/34620628

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档