Webpack 生成后的网页包和url背景问题

我有一个问题，在我用React构建应用程序后，我在github页面上没有背景图片

这是我的项目结构：

root
|_api
  |__{folders with json files}
|_res
|_src
  |_index.html
  |_styles.css
  |_{other sources}

这是我的

dist

生成后：

root/dist
|_api
|_res
|_index.html
|_index.js

这是我在

index.html

中使用的样式：

.body-area {
    margin: 0;
    background-color: black;
    background-image: url(/res/background.png);
    background-repeat: no-repeat;
    background-position: center;
    background-position-y: top;
}

这是我使用的网页配置：

const {resolve} = require('path');

const HtmlWebPackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const JSONMinifyPlugin  = require('node-json-minify');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const config = {
    entry: {
        main: resolve('./src/index.tsx'),
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: ['awesome-typescript-loader?module=es6'],
                exclude: [/node_modules/]
            },
            {
                test: /\.js$/,
                loader: 'source-map-loader',
                enforce: 'pre'
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'html-loader',
                        options: {minimize: true}
                    }
                ]
            },
            {
                test: /\.(css|scss)$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                loader: 'url-loader'
            }
        ]
    },
    optimization: {
        minimize: true
    },
    mode: "production",
    resolve: {
        extensions: ['.js', '.ts', '.tsx']
    },
    plugins: [
        new CleanWebpackPlugin(),
        new CopyWebpackPlugin([
            {
                from: 'res',
                to: 'res'
            },
            {
                from: 'api',
                transform(content, path){
                    if(path.endsWith(".png")) return content;
                    console.log("Minifying: " + path);
                    return JSONMinifyPlugin(content.toString())
                },
                to: 'api'
            }
        ]),
        new HtmlWebPackPlugin({
            template: './src/index.html',
            filename: './index.html'
        }),
    ]
};

module.exports = config;

构建后，我的背景图像css看起来与styles.css中的相同

背景图像：url（/res/background.png）

我需要在每次构建后将其更改为：

背景图片：url（res/background.png）

只有这样，它才开始在GP上正确显示背景。有没有一种方法可以使用Webpack实现自动化？或者我只是错误地使用了一些其他插件？
您的网页配置文件中的“输出”字段在哪里

output: {
    filename: 'js/[name].bundle.js',
    path: resolve(__dirname, 'dist'),
    publicPath: '/'
  }

您可能需要在配置C“opyWebpackPlugin”中使用类似的内容

您的网页配置文件中的“输出”字段在哪里

output: {
    filename: 'js/[name].bundle.js',
    path: resolve(__dirname, 'dist'),
    publicPath: '/'
  }

您可能需要在配置C“opyWebpackPlugin”中使用类似的内容