HtmlWebpackPlugin注入相对路径文件,该文件在加载非根网站路径时会中断
我正在使用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因为捆绑的文件未注入绝对路径。加载html文件时,它将在不存在的/items目录中查找js文件,因为react-router尚未加载。 如何获得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')); }); 本质上,我只需要了解以下内容: <script src="main...js"></script> 在源代码的开头加上斜线。 <script src="/main...js></script>