HtmlWebpackPlugin注入加载非根网站路径时中断的相对路径文件
HtmlWebpackPlugin注入加载非根网站路径时中断的相对路径文件
提问于 2016-01-06 04:27:35
我正在使用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/访问应用程序时失败，因为捆绑的文件不是通过绝对路径注入的。加载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>回答 3
Stack Overflow用户
回答已采纳
发布于 2016-01-06 15:47:52
尝试在您的webpack配置中设置publicPath：
output.publicPath = '/'HtmlWebpackPlugin使用publicPath作为注入urls的前缀。
另一种选择是在html模板的<head>中设置基本href，以指定文档中所有相对url的基本url。
<base href="http://localhost:3000/">Stack Overflow用户
发布于 2016-12-01 17:26:14
事实上，我不得不说：
output.publicPath: './';以使其在非根路径下工作。同时我还注射了：
baseUrl: './'转到
<base href="<%= htmlWebpackPlugin.options.metadata.baseUrl %>">有了这两个参数设置，它就像一个魔咒一样工作。
Stack Overflow用户
发布于 2018-07-23 21:26:11
在webpack配置中
config.output.publicPath = ''在你的index.html中
<base href="/someurl/" />这个应该可以了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34620628
复制相关文章
相似问题
腾讯云开发者
