Webpack не загружает изображения из CSS после сборки

Question

Когда я запускаю npm, запускаю сборку "build": "webpack" webpack создает папку dist для меня с main.css, index.html и index.js, но изображения из CSS или из HTML не работают и их там нет.

В CSS в папке dist они упоминаются примерно так

background-image: url("../../../assets/img/works/works-3.jpg");

А в HTML

<img src="./assets/img/logo.png">

Я не уверен, что исправить, чтобы мои изображения работали.

У меня есть этот конфиг веб-пакета

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const SpritesmithPlugin = require('webpack-spritesmith');
var path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/app.js',
    module: {
        rules: [
            {
                test: /\.css$|\.sass$|\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader?url=false'
                    },
                    { loader: 'sass-loader' }
                ]
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {test: /\.png$|jpg|jpeg/, use: [
                'file-loader?name=i/[hash].[ext]'
            ]}
        ]
    },
    resolve: {
        extensions: ['.js', '.es6'],
        modules: ['node_modules', 'spritesmith-generated']
    },
    output: {
        path: __dirname + '/dist',
        filename: 'index.js'
    },
    devServer: {
        port: 8080,
        contentBase: './src',
        watchContentBase: true
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css'
        }),
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new SpritesmithPlugin({
            src: {
                cwd: path.resolve(__dirname, 'src/assets/img/icons'),
                glob: '*.png'
            },
            target: {
                image: path.resolve(__dirname, 'src/spritesmith-generated/sprite.png'),
                css: path.resolve(__dirname, 'src/spritesmith-generated/sprite.scss')
            },
            apiOptions: {
                cssImageRef: '../spritesmith-generated/sprite.png'
            }
        })
    ]
};

UPD установлено Copy Webpack Plugin и скопирована папка ресурсов в папку dist.Изображения в HTML работают нормально, а изображения в CSS - нет.

Answer 1

После использования CopyWebpackPlugin вам необходимо изменить background-url на /dist/images/imageName.Но это зависит от того, как структурируется ваша сборочная папка.Этот плагин копирует все ресурсы в папку сборки, поэтому вам нужно импортировать их из папки dist.