Whi i cant make changes to html and css after webpack setup

I want to change styling in css file and change the layout in my html file but the changes doesn’t show up . I have already setup wetback.

This is my webpack.config.js file

//require node module path

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

//define our entry file and output path where we want the bundle file to be in

module.exports = {

    entry: ['./src/js/index.js'],

    output: {

        path: path.resolve(__dirname, 'dist'),

        filename: 'js/bundle.js'


    devServer: {

        contentBase: './dist'


    plugins: [

        new HtmlWebpackPlugin({

            filename: 'index.html',

            template: './src/index.html'



    module: {

        rules: [{

            test: /\.js$/,

            exclude: /node_modules/,

            use: {

                loader: 'babel-loader'





I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

If you are referring to hot-reload, then you should follow the configuration here: https://webpack.js.org/guides/hot-module-replacement/

Hope this helps

when I make changes to the css file the changes don’t show up.

I found the solution I just had to add the following rule to webpack.config file and install css-loader style-loader and sass-loader

                test: /\.scss$/,

                use: ['style-loader', 'css-loader', 'sass-loader']