开发模式下加载bundle.js报404 Not Found错误的问题排查求助

我在本地运行应用时碰到了个奇怪的问题：浏览器始终加载不了bundle.js，一直报404错误。

我在index.html里是这么引入这个文件的：

<script type="text/javascript" src="/static/js/bundle.js"></script>

但诡异的是，我直接在浏览器访问这个文件的完整URL http://localhost:3000/static/js/bundle.js时，却能正常看到打包后的JS代码：

我本来觉得如果Webpack没生成bundle.js的话，直接访问这个URL肯定也会失败，但现在显然不是这么回事。另外我也看了Webpack的资源报告，里面也显示了bundle.js相关的资源信息：

下面是我webpack.config里的output配置内容：

output: {
  pathinfo: true,
  filename: 'static/js/bundle.js',
  chunkFilename: 'static/js/[name].chunk.js',
  publicPath: "/",
  devtoolModuleFilenameTemplate: (info) => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
},

还有我用Express配置静态文件服务的代码：

app.use(favicon(path.join(__dirname, '../build', 'favicon.ico')));
app.use('/static', express.static(path.join(__dirname, '../build/static/'), { maxAge: '30d' }));

我的build文件夹结构是这样的：

-build
--static
---css
----main.123sf.css
---js
----main.123124.js
----main.123124.js.LICENSE.txt
---media
----mygif.gif
--favicon.ico
--index.html
--login.html

在开发模式下，我本来预期Chrome的Sources面板里应该能看到这样的结构：

-top
--localhost:3000
---static/js
----bundle.js

最后附上我当前用的依赖包版本：

"express": "^4.21.2",
"webpack": "^5.96.1",
"webpack-dev-server": "^5.2.0",

我实在摸不着头脑到底哪里出问题了，有没有大佬能帮我分析一下？

备注：内容来源于stack exchange，提问作者mason