Webpack DevServer 加载列表目录而不是 main.html答案

【问题标题】：Webpack DevServer loads listing directory instead instead of main.htmlWebpack DevServer 加载列表目录而不是 main.html
【发布时间】：2021-10-17 06:55:25
【问题描述】：

即使根据This Answer 修改了我的配置文件，Webpack 仍然提供“列表目录”而不是 html。

截图：

文件夹结构：

配置文件：

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

}

感谢任何形式的帮助，如果我没有说清楚，请随时问我问题。

【问题讨论】：

你的 dist 目录没有 index.html，它的 dist 显示的是什么 (dist=distribution dir)

标签： javascript webpack webpack-dev-server webpack-5

【解决方案1】：

我将文件名（在 HtmlWebpackPlugin 下）从“main.html”更改为“index.html”。这样就完成了。

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

答案来源： Grumpy

【讨论】：