Estoy usando webpack-dev-server con webpack v5 y por una razón cuando realicé cambios en mi CSS y js se actualizó a tiempo como se esperaba, pero para los archivos HTML tengo que actualizar mi navegador manualmente para ver la nueva versión cumplida.
src |-index.html |-index.jswebpack.config.js
const path = require("path"); const htmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { mode: "development", output: { clean: true, filename: "bundel.js", path: path.resolve(__dirname, "dist"), }, plugins: [ new htmlWebpackPlugin({ filename: "index.html", template: path.resolve(__dirname, "src", "index.html"), }), ], };mi paquete.json devDependencies
"devDependencies": { "html-webpack-plugin": "^5.5.0", "webpack": "^5.70.0", "webpack-cli": "^4.9.2", "webpack-dev-server": "^4.7.4" } Comienzo mi servidor con npx webpack serve --open
Agregué el archivo CSS y sus cargadores CSS relativos para probarlo y lo eliminé después de asegurarme de que funciona y solo HTML es el problema.
puede replicar el problema cuando cambia el contenido de index.html
Intente usar la opción DevServer para recargar la página y comprimir todo. En lugar de ejecutar npx webpack serve --open run npm run start usando esta configuración de script:
"scripts": { "start": "webpack-dev-server", "build": "webpack", "test": "echo \"Error: no test specified\" && exit 1" },E intente usar esta configuración base para su webpack.config.js
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { // Default settings mode:'development', devtool:'inline-source-map', entry:{ main: path.join(__dirname,'src','index.js') }, output:{ filename:'index.js', path: path.resolve(__dirname,'dist'), clean:true, }, // Loaders module:{ // JavaScript rules:[ { test: /\.js$/i, use:{ loader:'babel-loader', options:{ "presets":['@babel/preset-react'] }} }, // Css { test: /\.css$/i, use:['style-loader','css-loader'] } ] }, // Plugins plugins:[ new HtmlWebpackPlugin({ template: path.join(__dirname,'public','index.html') , filename:'index.html' }) ], // DevServer devServer:{ port:8080, open:true, compress:true, hot:true, liveReload:true, } };El problema es que webpack-dev-server no ve archivos HTML de forma predeterminada
así que encontré dos soluciones para esto:
watchFiles : devServer: { watchFiles: ["src/*.html"], hot: true, },browser-sync-webpack-plugin