Как настроить пути в webpack для изображений и шрифтов?

Question

Нужна помощь с wabpack , а именно настройкой путей для файлов которые подключаются в scss. Webpack работает и собирает проект нормально, но если я пытаюсь подключить изображение или шрифты в scss то выдаёт ошибку.

Вот так выглядит структура проекта:

файл конфига с путями:

  
const path = require('path');


const PATHS = {
    src: path.join(__dirname, '/src'),
    dist: path.join(__dirname, '/dist'),
    assets: 'assets/'
}

const {
    CleanWebpackPlugin
} = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ImageminPlugin = require('imagemin-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {   
     
   externals: {
        paths: PATHS
   },     
   entry: {      
        main: `${PATHS.src}/js/main.js`
   },
    output: {      
        filename: `${PATHS.assets}js/[name].js`,
        path: PATHS.dist,
        publicPath: ``,
    },    
    module: {
        rules: [{
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: '/node_modules'
            },
            {
                test: /\{png|jpg|gif|svg}$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]'
                }
            },
            {
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url-loader',
                options: {
                    name: `[name].[ext]`,
                    // name: `${PATHS.assets}libs/fonts/[name].[ext]`,
                },
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1
                        },
                    },
                    {
                        loader: "postcss-loader"
                    }
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1
                        },
                    },
                    {
                        loader: "postcss-loader"
                    },
                    {
                        loader: 'sass-loader'
                    }

                ],
            },
        ]
    },   
    plugins: [
        new CleanWebpackPlugin(),     
        new MiniCssExtractPlugin({
            filename: `${PATHS.assets}css/style.css`
        }),
        new HtmlWebpackPlugin({
            hash: false,
            template: `${PATHS.src}/index.html`,
            filename: './index.html',
            minify: false
        }),
        new CopyWebpackPlugin({
            patterns: [{
                    from: `${PATHS.src}/img`,
                    to: `${PATHS.assets}img`
                },
                {
                    from: `${PATHS.src}/libs/fonts`,
                    to: `${PATHS.assets}libs/fonts`

                }              
            ]

        })
    ],

};

Дальше мне нужно подключать картинку как фон в файле main.scss

body {
    background-image: url(../img/1.jpg);   
    display: flex;
    justify-content: space-between;
    align-items: center;
}

Файл собрался:

но в ошибка в браузере ибо другой путь:

БЛОГ НА HUSL

Как настроить пути в webpack для изображений и шрифтов?

Ответы (0 шт):