Django集成Webpack5：前端工具配置问题求助

我正在开发Django v3.2项目，希望通过npm和Webpack5优化前端。本人主要具备Django开发经验，对npm和Webpack较为陌生，集成过程中遇到多个问题，且对Webpack5的Asset Modules等配置了解有限。

项目技术栈 #

• Python 3.7.13
• 前端依赖：Bootstrap v5.3.3、Bootstrap-icons v1.11.3、jQuery
• Webpack相关版本：webpack v5.91.0、webpack-dev-server v5.0.4

我参考了多篇教程，但现有教程未完全匹配需求，部分问题源于Webpack4到Webpack5的实现变更。

具体问题 #

1. 自定义openBrowser()函数无法正常启动webpack-dev-server的浏览器
2. 配置webpack-dev-server与Django实现*热模块替换（HMR）*困难，目前通过proxy和writeToDisk实现，想了解更优方案，是否可让Django读取内存中的打包文件
3. 嵌套URL路径（如http://localhost:8080/report/site/[some_name]/）下打包文件无法被识别，根路径或一级路径正常
4. webpack-dev-server默认启动http://localhost:8081/，而非设置的8080端口，手动访问8080可正常打开应用
5. HTML模板中使用Bootstrap的SVG Sprite无法正常显示，怀疑路径配置有误

已附上项目目录结构、package.json、Webpack配置文件及Django settings.py的相关配置信息，寻求针对性解决方案。

内容的提问来源于stack exchange，提问作者Franklin