webpack-dev-server not hot reloading (webpack 5)

Question

I'm new to this webpack thing so I was looking through some Webpack 5 tutorials online and documentation but I don't know how to fix this issue

File Structure:

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

Webpack Config:

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")
    })]
}

When I run "npm run dev" my webpage opens with the HTML/CSS/JS but nothing changes (no recompiling happens) when I make a change to my code.

Also, another weird problem that occurs is that my import statements get deleted in the index.js file on save, not sure if thats related to this or just a VScode problem

Answer 1

You have a place to correct in your devServer.static.directory : it should be ./ , not dist . Here is the set of devServer's settings, which worked out for me:

devServer: {
   port: 8080,
   hot: "only",
   static: {
     directory: path.join(__dirname, './'),
     serveIndex: true,
   },
 },

Answer 2

I was struggling with HMR aswell and it is really disappointing to end up with almost nothing, except i got it working with this approach:

devServer: {
    port: 8080,
    hot: false,
    liveReload: true,
    watchFiles: ['dist/**/*'],
    open: ['http://localhost:8080/html/index.html']
}

basically i switched to liveReload to achieve same result and it works now.

PS you don't need to use 'open' but my html is located in dist/html/index.html and i used a link to open window with that html