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

Question

即使根据修改了我的配置文件，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"
        })
            ],

}

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

Answer 1

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

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

答案来源： Grumpy

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

Webpack DevServer loads listing directory instead instead of main.html

javascript

webpack

webpack-dev-server

webpack-5