Tengo un archivo html en la carpeta src. Instalé html-loader y html-webpack-plugin para generar un html actualizado en la carpeta dist. El uso npm run build generará un nuevo archivo html en la carpeta dist, pero no quiero ejecutar el mismo comando cada vez y quiero trabajar en actualizaciones en tiempo real, así que usé npm start y abre una ventana del navegador con html de la carpeta src pero nunca genera un nuevo archivo html en la carpeta dist e incluso si hago manualmente un nuevo html allí, la ventana del navegador nunca se actualizará. Así que estoy atascado con html de la carpeta src (y como estoy usando static: ./dist incluso eso no se actualizará).

webpack.config.js

 const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const { title } = require("process"); module.exports = { mode: "development", entry: "./src/index.js", output: { filename: "main.js", path: path.resolve(__dirname, "dist"), clean: true, }, plugins: [ new HtmlWebpackPlugin({ template: "./src/index.html", title: "todo-app", }), ], devtool: "inline-source-map", devServer: { static: "./dist", }, module: { rules: [ { test: /\.css$/i, use: ["style-loader", "css-loader"], }, { test: /\.html$/i, use: ["html-loader"], }, ], }, };

Paquete.json

 { "name": "todo-app", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack", "start": "webpack serve --open" }, "author": "", "license": "ISC", "devDependencies": { "css-loader": "^6.6.0", "html-loader": "^3.1.0", "html-webpack-plugin": "^5.5.0", "style-loader": "^3.3.1", "webpack": "^5.68.0", "webpack-cli": "^4.9.2", "webpack-dev-server": "^4.7.4" } }