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

Posted 2023-02-22

【中文标题】Webpack DevServer 加载列表目录而不是 main.html

【英文标题】：Webpack DevServer loads listing directory instead instead of 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)

【参考方案1】：

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

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

答案来源： Grumpy