Actualmente estoy aprendiendo a usar Webpack. En el curso de esto estoy construyendo un modelo. Para que el desarrollo sea un poco más rápido y dinámico, me gustaría usar webpack-dev-server. Esto también se puede iniciar correctamente. El problema es que los cambios no son visibles. Incluso si actualizo la página manualmente, los cambios no están allí.

Mi estructura de carpetas:

 ├── dist │ └── bundle.js ├── src │ ├── scss │ │ └── app.scss └── index.js ├── webpack.config.js ├── package.json ├── package.lock.json └── index.html

Mi webpack-config:

 const path = require("path"); module.exports = { entry: './src/index.js', mode: "development", cache: true, output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), publicPath: path.resolve(__dirname, '') }, module: { rules: [ { test: /\.s[ac]ss$/i, use: [ "style-loader", "css-loader", "sass-loader", ], } } ], }, devServer: { static: "./", compress: true, port: 9000, hot: true }, }

Por ejemplo, realizo un cambio en app.scss. Esto solo se vuelve visible cuando agrego un paquete web. Sé que el servidor de desarrollo devuelve los datos de la memoria y no escribe los cambios en los archivos.