Webpack构建后build/public缺失文件问题求助

问题分析 #

你的Webpack配置存在两个核心问题：

• 缺少对非SVG格式图片、CSV、JSON等静态资源的处理规则，Webpack无法识别这些文件并打包到输出目录
• 未配置自动复制public文件夹下未被源码引用的静态资源（比如manifest.json、robots.txt）的逻辑，导致这类文件不会出现在build/public中

具体修复步骤 #

1. 安装必要插件 #

首先安装copy-webpack-plugin，用于复制public目录下的静态资源：

npm install copy-webpack-plugin --save-dev

2. 补充资源处理规则 #

在module.rules的oneOf数组中添加以下规则，覆盖更多静态资源类型：

{
    test: /\.(png|jpe?g|gif|bmp)$/,
    type: 'asset/resource',
    exclude: /node_modules/,
},
{
    test: /\.(csv|json)$/,
    type: 'asset/resource',
    exclude: /node_modules/,
}

该规则会让Webpack将匹配到的文件作为独立资源输出到构建目录，并返回正确的引用路径。

3. 配置CopyWebpackPlugin复制公共资源 #

在plugins数组中添加CopyWebpackPlugin实例，复制public下除index.html外的所有文件：

const CopyWebpackPlugin = require('copy-webpack-plugin');

// 插入到plugins数组中
new CopyWebpackPlugin({
    patterns: [
        {
            from: path.resolve(__dirname, 'public'),
            to: path.resolve(__dirname, 'build/public'),
            globOptions: {
                ignore: ['**/index.html'], // 排除index.html，因为HtmlWebpackPlugin已处理
            },
        },
    ],
}),

这一步会确保manifest.json、robots.txt、未被源码引用的图片/CSV等文件都被复制到build/public目录。

4. 修正HtmlWebpackPlugin配置 #

HtmlWebpackPlugin的manifest、robots等属性并非用于复制文件，而是注入模板变量，删除这些多余属性，保留必要配置：

new HtmlWebpackPlugin({
    template: 'public/index.html',
    favicon: 'public/favicon.ico', // favicon会被自动处理并输出
}),

5. 优化生产环境配置 #

• 生产环境建议使用source-map而非inline-source-map，后者会将source map嵌入bundle，增大文件体积：

devtool: 'source-map',

• 移除生产环境不需要的热更新插件：

// 删除这一行：new webpack.HotModuleReplacementPlugin(),

• 调整PUBLIC_URL匹配输出路径，如果输出目录是build/public，设为空字符串即可：

new InterpolateHtmlPlugin({
    PUBLIC_URL: '',
}),

完整修改后配置示例 #

const HtmlWebpackPlugin = require('html-webpack-plugin');
const InterpolateHtmlPlugin = require('interpolate-html-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: './src/index.tsx',
    mode: 'production',
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx', '.scss', '.css'],
    },
    devtool: 'source-map',
    output: {
        clean: true,
        filename: '[name].bundle.[fullhash].js',
        chunkFilename: '[id].[name].[fullhash].js',
        path: path.resolve(__dirname, 'build/public'),
    },
    optimization: {
        splitChunks: {
            chunks: 'all',
        },
        nodeEnv: 'production',
        minimize: true,
    },
    performance: {
        maxAssetSize: 50000,
        maxEntrypointSize: 50000,
    },
    module: {
        rules: [
            {
                oneOf: [
                    {
                        test: /\.(ttf|woff|woff2|woff?|woff2?)/,
                        type: 'asset/resource',
                        exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/, /\.tsx?$/],
                    },
                    {
                        test: /\.svg$/,
                        type: 'asset/resource',
                        exclude: /node_modules/,
                    },
                    {
                        test: /\.(png|jpe?g|gif|bmp)$/,
                        type: 'asset/resource',
                        exclude: /node_modules/,
                    },
                    {
                        test: /\.(csv|json)$/,
                        type: 'asset/resource',
                        exclude: /node_modules/,
                    },
                    {
                        test: /\.ts$|\.tsx$/,
                        loader: 'ts-loader',
                        exclude: /node_modules/,
                    },
                    {
                        test: /\.js$|\.jsx$/,
                        use: 'babel-loader',
                        exclude: /node_modules/,
                    },
                    {
                        test: /\.(c|sc|sa)ss$/,
                        use: [
                            'style-loader',
                            {
                                loader: 'css-loader',
                                options: {
                                    importLoaders: 1,
                                },
                            },
                            {
                                loader: 'sass-loader',
                                options: {
                                    sassOptions: {
                                        includePaths: ['app', 'node_modules'],
                                    },
                                },
                            },
                        ],
                    },
                ],
            },
        ],
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: 'public/index.html',
            favicon: 'public/favicon.ico',
        }),
        new InterpolateHtmlPlugin({
            PUBLIC_URL: '',
        }),
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: path.resolve(__dirname, 'public'),
                    to: path.resolve(__dirname, 'build/public'),
                    globOptions: {
                        ignore: ['**/index.html'],
                    },
                },
            ],
        }),
    ],
};

验证修复 #

执行构建命令：

npm run build

此时build/public目录应该包含所有public下的静态资源，页面可正常加载这些资源。

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