HtmlWebpackPlugin注入加载非根网站path时破坏的相对path文件
我正在使用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因为捆绑文件没有注入绝对path。 当html文件被加载时，它将在不存在/items目录内查找js文件，因为react-router尚未加载。
我怎样才能得到HtmlWebpackPlugin注入文件的绝对path，所以expression会寻找他们在我的/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')); });
基本上，我只需要得到这一行：
<script src="main...js"></script>
在源头开始时有一个斜线。
<script src="/main...js></script>
尝试在您的webpackconfiguration中设置publicPath：
output.publicPath = '/'
HtmlWebpackPlugin使用publicPath预先注入注入的URL。
另一个select是在你的html模板的<head>中设置基本的href，在你的文档中指定所有相关url的基本url。
<base href="http://localhost:3000/">
其实我不得不说：
output.publicPath: './';
为了使它在非ROOTpath中工作。 同时我正在注射：
baseUrl: './'
成
<base href="<%= htmlWebpackPlugin.options.metadata.baseUrl %>">
有了这两个参数设置，它就像一个魅力。
