Javascript HtmlWebpackPlugin 注入在加载非根网站路径时会中断的相对路径文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34620628/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HtmlWebpackPlugin injects relative path files which breaks when loading non-root website paths
提问by aherriot
I am using webpack and the HtmlWebpackPlugin to inject bundled js and css into an html template file.
我正在使用 webpack 和 HtmlWebpackPlugin 将捆绑的 js 和 css 注入到 html 模板文件中。
new HtmlWebpackPlugin({
template: 'client/index.tpl.html',
inject: 'body',
filename: 'index.html'
}),
And it produces the following html file.
它会生成以下 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>
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/1because 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 /itemsdirectory because react-router hasn't loaded yet.
这在访问应用程序的根目录时工作正常localhost:3000/，但当我尝试从另一个 URL 访问应用程序时失败，例如，localhost:3000/items/1因为捆绑文件没有注入绝对路径。当 html 文件加载时，它会在 non-exist/items目录中查找 js 文件，因为 react-router 还没有加载。
How can I get HtmlWebpackPlugin to inject the files with an absolute path, so express will look for them at the root of my /distdirectory and not at /dist/items/main-...min.js? Or maybe I can change my express server to work around the issue?
如何让 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'));
});
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>
回答by Magnus Sjungare
Try setting the publicPath in your webpack config:
尝试在你的 webpack 配置中设置 publicPath：
output.publicPath = '/'
HtmlWebpackPlugin use the publicPath to prepend the urls of the injects.
HtmlWebpackPlugin 使用 publicPath 来添加注入的 url。
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.
另一种选择是在<head>您的 html 模板中设置 base href ，以指定文档中所有相关 url 的基本 url。
<base href="http://localhost:3000/">
回答by Kevin FONTAINE
In fact, I had to put :
事实上，我不得不说：
output.publicPath: './';
in order to have it working in a non-ROOT path. At the same time I was injecting :
为了让它在非ROOT路径中工作。同时我正在注射：
baseUrl: './'
into
进入
<base href="<%= htmlWebpackPlugin.options.metadata.baseUrl %>">
With both parameter set, it worked like a charm.
使用这两个参数集，它就像一个魅力。
回答by hannad rehman
in webpack config
在 webpack 配置中
config.output.publicPath = ''
in your index.html
在你的 index.html
<base href="/someurl/" />
this should do it.
这应该这样做。
