Parece que no puedo entender cómo hacer que funcione el reemplazo del módulo caliente. Cada vez que realizo un cambio en mi archivo html o mis archivos CSS, el paquete web siempre se actualiza para mostrar los cambios.

webpack.config.js

 const path = require('path') const postCSSPlugins = [ require('postcss-simple-vars'), require('postcss-nested'), require('autoprefixer'), require('postcss-import') ] module.exports = { entry: './app/assets/scripts/App.js', output: { filename: 'bundled.js', path: path.resolve(__dirname, 'app') }, devServer: { watchFiles: ('./app/**/*.html'), static: path.join(__dirname, 'app'), hot: true, port: 3000, host: '0.0.0.0' }, mode: 'development', module: { rules: [ { test: /\.css$/i, use: ['style-loader','css-loader', {loader: 'postcss-loader', options: {postcssOptions: {plugins: postCSSPlugins}}}] } ] } }

paquete.json

 "scripts": { "dev": "webpack serve --hot", "test": "echo \"Error: no test specified\" && exit 1" }, "devDependencies": { "autoprefixer": "^10.4.2", "css-loader": "^6.6.0", "postcss-import": "^14.0.2", "postcss-loader": "^6.2.1", "postcss-nested": "^5.0.6", "postcss-simple-vars": "^6.0.3", "style-loader": "^3.3.1", "webpack": "^5.69.1", "webpack-cli": "^4.9.2", "webpack-dev-server": "^4.7.4" }

Aplicación.js

 import '../styles/styles.css' if(module.hot) { module.hot.accept(function() { console.log("Accepting the updated modules...") }) }

Lo que he probado..

• Intenté usar la opción hotOnly pero se eliminó
• Intenté agregar una etiqueta de opción en la CLI en mi archivo package.json

Nada parece estar funcionando. Cada vez que hago un cambio, toda la página se actualiza.