webpack build css img url не могу получить относительный путь

Question

Я использую веб-пакет с реактивами.

Я пытаюсь с помощью css установить background-image. когда я строю свой проект, я всегда получаю один и тот же путь для img, независимо от того, что я пытаюсь.

'http://localhost:8080/images/img1.png' вместо - 'http://localhost:8080/dist/images/img1.png'

Структура папок:

    src/
      App/
        app.jsx
        app.html
        app.css
      public/
        images/
          img1.png
          img2.png
      index.jsx
      index.html

      dist/
        images/
          img1.png
          img2.png
        bundle.js
        main.bundle.css
        index.html

      webpack.config.js

webpack.config.js

    var path = require('path');
    var HtmlWebpackPlugin = require('html-webpack-plugin');
    const CleanWebpackPlugin = require('clean-webpack-plugin');
    const CopyWebpackPlugin = require('copy-webpack-plugin');

    // HTML plugin options
    let htmlOptions = {
        template: './src/index.html',
        filename: 'index.html',
        inject: 'body',

    }

    module.exports = {
        entry: './src/index.jsx',
        output: {
            path: path.resolve('dist'),
            filename: 'bundle.js',
        },
        resolve: {
            extensions: ['.js', '.jsx', '.css']
        },
        module: {
            loaders: [
                {
                    test: /\.jsx?$/,
                    exclude: /(node_modules|bower_components)/,
                    loader: 'babel-loader',
                    query: {
                        presets: ['react', 'es2015', 'stage-3']
                    },
                },
                {
                    test: /\.css$/,
                    use: ['style-loader', 'css-loader']
                },
                {
                    test: /\.jpe?g$|\.ico$|\.gif$|\.png$|\.svg$|\.wav$|\.mp3$/,
                    loader: 'file-loader',
                    options: {
                        outputPath: 'img/',
                        name: '[name].[ext]',
                        publicPath: '/dist'
                    }
                },
                {
                    test: /\.(ttf|eot|woff|woff2)$/,
                    use: {
                        loader: "file-loader",
                        options: {
                            name: "fonts/[name].[ext]",
                        },
                    },
                },
            ]
        },
        devtool: 'source-map',
        plugins: [
            new HtmlWebpackPlugin(htmlOptions),
            new CleanWebpackPlugin(['dist']),
            new CopyWebpackPlugin([{ from: __dirname + '/src/public' }])
        ],
        devServer: {
            historyApiFallback: true
        }
    }

app.css

    body{
      background-image: url('/images/loginImageBg.png');
    }

** Я пробовал **

• плагинов: новый ExtractTextPlugin - для некоторых возникающих конфликтов с cleanWebpackPlugin.
• URL-погрузчик
• запрос: {outputPath: './data/'casts
• publicPath, outputPath

ничего, что я делаю, кажется, не работает

Пожалуйста, помогите!