Как вывести изображение в React + Redux (webpack)?

Question

[Memorivardo]

Пытаюсь поизучать react + redux. Столкнулся с глупейшей проблемой, полтора часа уже гуглю впустую. Похожих проблем масса, а описанные решения не помогают.

Итак, завожу сервер на своём localhost:3000 с вот такой структурой:

В index.js подключены стили вот таким образом:
import './styles/compiled/app.css'
В стилях есть правила:

body {
    background: url(/assets/back.jpg);
    background-size: cover;
    font-family: 'Open Sans', sans-serif;
}

Завожу сервер, бегу в браузер и вижу в инспекторе на такие свойства:

body {
    background: url(http://localhost:3000/assets/back.jpg);
    background-size: cover;
    font-family: 'Open Sans',sans-serif;
}

Захожу напрямую на URL картинки, получаю надпись: "Cannot GET /assets/back.jpg".

Нагуглил, что проблема может быть в конфиге WebPack, поставил загрузчик картинок вроде бы, но увы.

Итак вопрос:
Куда класть картинки (мб оставить там же) и что нужно сделать, чтобы они отобразились?

Конфиг webpack'а:

var path = require('path');
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var precss = require('precss');

module.exports = {
    devtool: 'cheap-module-eval-source-map',
    entry: [
        'webpack-hot-middleware/client',
        'babel-polyfill',
        './src/index'
    ],
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/assets/'
    },
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.LoaderOptionsPlugin({
            options: {
                postcss: [
                    autoprefixer(),
                ]
            }
        })
    ],
    module: {
        rules : [
            {
                test: /\.js$/,
                use: [
                    {
                        loader: 'react-hot-loader',
                    },
                    {
                        loader: 'babel-loader',
                    },
                ],
                include: [
                    path.resolve(__dirname, "src"),
                ]
            },
            {
                test: /\.js$/,
                loader: 'eslint-loader',
                enforce: 'pre',
                include: [
                    path.resolve(__dirname, "src"),
                ]
            },
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    {
                        loader: "css-loader",
                        options: {
                            modules: true,
                            sourceMap: true,
                            importLoaders: 1,
                            // localIdentName: "[name]--[local]--[hash:base64:8]"
                            localIdentName: "[local]"
                        }
                    },
                    "postcss-loader" // has separate config, see postcss.config.js nearby
                ]
            },
            {
                test: /\.(jpg|jpeg|gif|png)$/,
                exclude: /node_modules/,
                loader:'url-loader?limit=1024&name=images/[name].[ext]'
            },
            {
                test: /\.(woff|woff2|eot|ttf|svg)$/,
                exclude: /node_modules/,
                loader: 'url-loader?limit=1024&name=fonts/[name].[ext]'
            }

        ]
    }
};

Answer 1

[Islam Ibakaev]

ты берёшь картинки из папки assets и потом после сборки туда же их и отправляешь. как-то это странно. возможно лучше создать папку/src/images, а в конфиге

{
      test: /\.(jpg|jpeg|gif|png)$/,
       include: path.resolve(__dirname, "src/images"),
       loader:'url-loader?limit=1024&name=images/[name].[ext]'
   }

и в стилях

body {
    background: url(../../assets/back.jpg);
    background-size: cover;
    font-family: 'Open Sans', sans-serif;
}