Using Webpack with an existing vanilla JS project results in an `Cannot GET /` error-CodePudding

I have a file structure like this for my simple JS web application:

myproject
│   README.md
│   .gitignore
|   index.html    
└───style
│   │   style.css
│   │   style.scss
│   │   style.css.map   
│   
└───js
    │   javascript1.js
    │   javascript2.js
    |   javascript3.js
│   
└───assets
    │   someimage.png
    │   someimage2.png
    |   ...

My workflow so far has been to compile the SCSS to CSS and then just open index.html in a browser. I'd like to make the workflow more efficient (automatic SCSS compilation, hot or live reload, JS minimization, etc.), so I am trying to work with some build tool like Webpack. I followed a guide and added, for example, this file webpack.config.js to the root of my project:

module.exports = {
  entry: [
    './js/javascript1.js',
    './js/javascript2.js',
    './js/javascript3.js',
    './style/style.css'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "script-loader"
        }
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader",
            options: {
            }
          }
        ]
      }
    ]
  }
};

and server.js:

const express = require('express');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();
app.use(express.static(__dirname));//
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'index.html'));
});
app.listen(port);

and added an empty bundle.js file to the project root and the following tag to my existing index.html:

<script src="bundle.js"></script>

Now, after adding a package.json file with the script

"dev": "webpack-dev-server --mode development --open"`

and after runnning npm install and npm dev run, the project compiles (according to VS Code), but I get the following page on localhost:8080:

Cannot GET /

I have spent an entire workday trying to figure this all out. Why am I getting this error?

CodePudding user response：

Creating a new HTML page in \dist, referring to the bundle.js file from the correct location and adding the following to module.exports in webpack.config.js:

devServer: {
  static: './dist'
},

worked in the end.