HtmlWebpackPlugin注入加载非根网站路径时中断的相对路径文件 [英] HtmlWebpackPlugin injects relative path files which breaks when loading non-root website paths
问题描述
新的HtmlWebpackPlugin（{
template：'client / index.tpl.html'，
inject：'body'，
filename：'index.html'
}），
它生成以下html文件。
code><！doctype html>
< html lang =en>
< head>
...
< link href =main-295c5189923694ec44ac.min.css =stylesheet>
< / head>
< body>
< div id =app>< / div>
< script src =main-295c5189923694ec44ac.min.js>< / script>
< / body>
< / html>
访问应用程序的根目录 localhost：3000 / / code>，但是当我尝试从另一个URL访问应用程序时失败，例如 localhost：3000 / items / 1 ，因为未注入捆绑的文件有一个绝对的路径。当加载html文件时，它将在不存在的 / items 目录中查找js文件，因为反应路由器尚未加载。
如何获取HtmlWebpackPlugin以绝对路径注入文件，所以express将在我的 / dist 的根目录下找到它们目录而不在 / dist / items / main -... min.js ？或者也许我可以更改我的快递服务器来解决问题？
app.use（express.static（__ dirname +'/ ../dist'））;
app.get（'*'，函数响应（req，res）{
res.sendFile（path.join（__ dirname，'../dist/index.html'）） ;
}）;
本质上，我只需要得到以下一行：
< script src =main ... js>< / script>
在源头开始有斜杠。
< script src =/ main ... js>< / script>
尝试在webpack config中设置publicPath：
output.publicPath ='/'
HtmlWebpackPlugin使用publicPath来添加注入
另一个选项是将html模板的< head> 中的基本href设置为指定文档中所有相对URL的基本URL。
< base href =http：// localhost：3000 / >
I am using webpack and the HtmlWebpackPlugin to inject bundled js and css into an html template file.
new HtmlWebpackPlugin({
template: 'client/index.tpl.html',
inject: 'body',
filename: 'index.html'
}),
And it produces the following html file.
<!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>
This works fine when visiting the root of the app localhost:3000/, but fails when I try to visit the app from another URL, for example, localhost:3000/items/1 because the bundled files are not injected with an absolute path. When the html file is loaded, it will look for the js file inside the non-exist /items directory because react-router hasn't loaded yet.
How can I get HtmlWebpackPlugin to inject the files with an absolute path, so express will look for them at the root of my /dist directory and not at /dist/items/main-...min.js? Or maybe I can change my express server to work around the issue?
app.use(express.static(__dirname + '/../dist'));
app.get('*', function response(req, res) {
res.sendFile(path.join(__dirname, '../dist/index.html'));
});
Essentially, I just need to get the line:
<script src="main...js"></script>
to have a slash at the start of the source.
<script src="/main...js></script>
Try setting the publicPath in your webpack config:
output.publicPath = '/'
HtmlWebpackPlugin use the publicPath to prepend the urls of the injects.
Another option is to set the base href in the <head> of your html template, to specify the base url of all relative urls in your document.
<base href="http://localhost:3000/">
这篇关于HtmlWebpackPlugin注入加载非根网站路径时中断的相对路径文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
