Soy nuevo en esto de los paquetes web, así que estuve revisando algunos tutoriales y documentación de Webpack 5 en línea, pero no sé cómo solucionar este problema.

Estructura del archivo:

 dist node_modules src modules js files style style.css index.html index.js package.json package-lock.json webpack.config.js

Configuración del paquete web:

 const { appendFile } = require("fs"); const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { mode: 'development', entry: { main: path.resolve(__dirname,'src/index.js'), }, output: { path:path.resolve(__dirname,'dist'), filename: 'app.bundle.js', hashFunction: 'xxhash64', }, devtool: 'inline-source-map', devServer: { static: { directory:path.resolve(__dirname,'dist'), watch:true, }, port: 8080, open: true, hot: true, }, //loaders module: { rules: [ {test: /\.css$/, use:['style-loader','css-loader']} ] }, //plugins plugins: [new HtmlWebpackPlugin({ title: 'To Do List', filename: 'index.html', template: path.resolve(__dirname,"./src/index.html") })] }

Cuando ejecuto "npm run dev", mi página web se abre con HTML/CSS/JS, pero nada cambia (no se vuelve a compilar) cuando realizo un cambio en mi código.

Además, otro problema extraño que ocurre es que mis declaraciones de importación se eliminan en el archivo index.js al guardar, no estoy seguro si eso está relacionado con esto o solo es un problema de VScode