Tengo una estructura de archivos como esta para mi aplicación web JS simple:

 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 | ...

Mi flujo de trabajo hasta ahora ha sido compilar SCSS a CSS y luego simplemente abrir index.html en un navegador. Me gustaría hacer que el flujo de trabajo sea más eficiente (compilación SCSS automática, recarga activa o en vivo, minimización de JS, etc.), por lo que estoy tratando de trabajar con alguna herramienta de compilación como Webpack. Seguí una guía y agregué, por ejemplo, este archivo webpack.config.js a la raíz de mi proyecto:

 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: { } } ] } ] } };

y 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);

y agregué un archivo bundle.js vacío a la raíz del proyecto y la siguiente etiqueta a mi index.html existente:

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

Ahora, después de agregar un archivo package.json con el script

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

y después de ejecutar npm install y npm dev run , el proyecto se compila (según VS Code), pero aparece la siguiente página en localhost:8080 :

Cannot GET /

He pasado todo un día de trabajo tratando de resolver todo esto. ¿Por qué recibo este error?