Estoy usando Webpack 5 y no puedo configurar el servidor de desarrollo para que recopile los cambios más recientes de inmediato. Es por eso que cuando tengo algún cambio en mi proyecto, debo hacer primero la yarn build y luego el desarrollo de yarn dev cada vez. Ya he visto la misma pregunta aquí . Webpack-dev-server no detecta los cambios más recientes , pero writeToDisk: true muestra un error en la consola. He adjuntado mi archivo webpack.config.js.

 const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const miniCss = require('mini-css-extract-plugin'); module.exports = { entry: { main: './src/index.js' }, output: { path: path.resolve(__dirname, 'dist'), filename: 'main.js', publicPath: '' }, mode: 'development', devServer: { static: { directory: path.join(__dirname, "dist") }, compress: true, port: 8080, devMiddleware: { publicPath: "//localhost:8080", }, hot: "only", open: true }, module: { rules: [ { test: /\.js$/, use: 'babel-loader', exclude: '/node_modules/' }, { test: /\.pug$/, loader: 'pug-loader', options: { pretty: true } }, { test: /\.css$/, use: [MiniCssExtractPlugin.loader, { loader: 'css-loader' }] }, { test: /\.(s*)css$/, use: [ miniCss.loader, 'css-loader', 'sass-loader', ] }, { test: /\.(png|svg|jpg|gif|woff(2)?|eot|ttf|otf)$/, type: 'asset/resource' }, ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/pages/page/page.pug', filename: 'index.html' }), new MiniCssExtractPlugin(), new miniCss(), ] }