webpack-dev-server not loading html file

Question

I am trying to use webpack dev server to automatically refresh the browser when I make changes to HTML, and css files. However I'm running into a weird issue shown below when I open localhost:3000 website.

I can click on the home-page.html file and it will load the file however when I make changes to the HTML file or the css file nothing happens. Infact the css that was once applied to the home-page.html file is no longer being applied.

I should mention that when I drag the home-page.html file to the browser everything loads properly including the css.

I haven't run into this issue before. I will have multiple HTML files in the future and they will all be located in the views directory.

All css files will be located in the public directory.

Below is an image of my working directory :

webpack.config.js:

const path = require('path')
const postCSSPlugins = [
    require('postcss-import'),
    require('postcss-simple-vars'),
    require('postcss-nested'),
    require('autoprefixer')
]

module.exports = {
    entry: './public/scripts/App.js',
    output: {
        filename: 'bundled.js',
        path: path.resolve(__dirname, 'public')
    },
    devServer: {
        before: function(app, server) {
            server._watch('./views/**/*.html')
        },
        contentBase: path.join(__dirname, './views'),
        hot: true,
        port: 3000
    },
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader','css-loader?url=false', {loader: 'postcss-loader', options: {plugins: postCSSPlugins}}]
            }
        ]
    }
}

package.json :

"scripts": {
    "dev": "webpack-dev-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  }

Not sure what the issue is. I was wondering if anyone could point me in the right direction.

Answer 1

I figured it out. The reason it wasn't generating the HTML is because the file needs to be named index.html.