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

1

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'

            }

        }]

    }

}
2

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.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

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

3

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

4

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

5

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']
            }