Webpack DevServer loads listing directory instead instead of main.html

Question

Even after modifying my config file according to This Answer, Webpack still serves "listing directory" instead of the html.

Screenshot:

Folder structure:

Config file:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    mode: "development",

    entry: {
        app: path.resolve(__dirname, "src/js/app.js"),
    },

    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "js/[name].[contenthash].bundle.js",
        clean: true
    },

    devtool: "inline-source-map",

    devServer: {
        publicPath: "/",
        contentBase: path.resolve(__dirname, "./dist"), 
        port: 5001,
        open:true,
        hot: true,
        watchContentBase: true
    },

    module: {
        rules: [    
            {
                test: /\.js$/,
                exclude: /node_modules/
            },

            {
                test:/(\.css)$/,
                use: [MiniCssExtractPlugin.loader, "css-loader"]
            }
        ]
    },

    plugins: [new HtmlWebpackPlugin({
        filename: "main.html",
        template: path.resolve(__dirname, "src/index.html"),
        }), 

        new MiniCssExtractPlugin({
            filename: "css/main.[contenthash].css"
        })
            ],

}

I appreciate any kind of help, Please feel free to ask me questions if I haven't made myself clear.

Your dist dir doenst have a index.html, Its dist whats shown ( dist=distribution dir) — Grumpy, Aug 14 '21 at 10:19

score 1 · Accepted Answer · answered Aug 14 '21 at 11:09

I changed the filename(under HtmlWebpackPlugin) from "main.html" to "index.html". This did the job.

    plugins: [new HtmlWebpackPlugin({
        filename: "index.html",
        template: path.resolve(__dirname, "src/index.html"),
        })

Answer Credit: Grumpy

Webpack DevServer loads listing directory instead instead of main.html

1 Answers1