As far as I understand when browser tries to GET bundle.js from http://localhost:3000/static/js/bundle.js it checks into '/static' virtual path which has the middleware to server static files:

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

As my build folder structure looks like this

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

and it does not contain the bundled javascript in the name bundle.js, it returns 404 not found error. I kind of tried every solution available on the internet :( but nothing worked. So I set up things to get the files served from file system.

devMiddleware: {
      publicPath: config.output.publicPath,
      writeToDisk: true,
    },

And then added another middleware for '/static' path to read from that dist directory, by default writeToDisk generates dist folder in the root directory for output.

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

If needed, we redirect the output path by setting path inside output of webpack.config:

output: {
    path: 'path/to/get/output/files',
}

I was upgrading my application environment from node 10 to node 16 and thus ended up upgrading my webpack related packages as well. The versions I used before:

"express": "^4.17.1",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.11.3"

I am pretty sure express has nothing to do with this. But I just wonder how things worked with these old versions in node 10