Webpack 5配置问题：图片未复制到dist文件夹

你的配置里有两个关键错误导致图片资源没被正确处理：

• 配置项名称错误：Webpack中定义模块规则的配置项是module，不是你写的loader。这个错误会让Webpack完全忽略你的图片和CSS规则。
• loader拼写错误：css-loeader应该是css-loader，拼写错误会导致CSS加载失败。

以下是修正后的完整配置：

const path = require('path');
module.exports = {
    mode : "development",
    entry: "./src/index.js",
    output: {
        path: path.join(__dirname, "dist"),
        filename: "bundle.js",
        assetModuleFilename: '[name][ext]'
    },
    devtool : 'eval-cheap-source-map',
    devServer: {
        static: {
            directory: path.join(__dirname, 'dist'),
        },
    },
    module: { // 修正配置项名称
        rules: [
            {
                test: /\.(png|jpg|gif|svg)$/,
                type: 'asset/resource'
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'] // 修正loader拼写
            }
        ]
    }
}

补充说明：

• 执行webpack命令进行正式打包后，图片会按照assetModuleFilename的配置输出到dist文件夹中。
• 如果你使用webpack-dev-server，它是在内存中托管资源，不会实际生成dist文件夹里的文件，停止服务后内存中的资源会消失，要查看实际文件请执行普通打包命令。

内容的提问来源于stack exchange，提问作者localhost