Почему меняется url у картинки после сборки Вебпака?

Question

[Афанасий]

background: url(../img/intro__bg.jpg) в main.scss пишу такой путь до картинки, на выходе получаю: background:url(assets/img/intro__bg.jpg.

пробовал обрабатывать scss с помощью resolve-url-loader, но не помогло

...
module: {
        rules: [
            {
                test: /\.(scss|css)$/,
                use: [{
                    loader: MiniCSSExtractPlugin.loader
                }, {
                    loader: 'css-loader',
                    options: {
                      url: true,
                      sourceMap: true,
                    }
                  },'postcss-loader',
                  {
                    loader: 'resolve-url-loader',
                    options: {
                      root: paths.src
                    }
                  }, 
                  {
                    loader: 'sass-loader',
                    options: {
                      sourceMap: true,
                    }
                  }]
            },

...

Код вебпака:

common

const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCSSExtractPlugin = require('mini-css-extract-plugin')

const fs = require('fs')
const paths = require('./paths')
const path = require('path')

const pages_dir = `${paths.src}/pages`
const pages_dirs = fs.readdirSync(pages_dir).filter(filename => filename.endsWith(''))

const component_dir = `${paths.src}/components`
const component_dirs = fs.readdirSync(component_dir).filter(filename => filename.endsWith(''))

module.exports = {
    entry: {
        index: paths.src + '\\index.js'
    },
    output: {
        filename: `${paths.assets}js/[name].js`,
        path: paths.dist,
        assetModuleFilename: 'assets/img/[name][ext]'
    },
    optimization: {
        splitChunks: {
            chunks: "all",
            minSize: 1,
            minChunks: 2
        }
    },
    module: {
        rules: [
            {
                test: /\.(scss|css)$/,
                use: [{
                    loader: MiniCSSExtractPlugin.loader
                }, {
                    loader: 'css-loader',
                    options: {
                      url: true,
                      sourceMap: true,
                    }
                  },'postcss-loader',
                  {
                    loader: 'resolve-url-loader',
                    options: {
                      root: paths.src
                    }
                  }, 
                  {
                    loader: 'sass-loader',
                    options: {
                      sourceMap: true,
                    }
                  }]
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader'],
            },
            {
                test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
                type: 'asset',
            },
            {
                test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
                type: 'asset/resource',
            },
            {
                test: /\.pug$/,
                loader: 'pug-loader'
            }
        ],
    },
    plugins: [
        new CleanWebpackPlugin(),
        ...pages_dirs.map(dir => new HtmlWebpackPlugin({
            template: `${pages_dir}/${dir}/${dir}.html`,
            filename: `${dir}.html`,
            chunks: [`${dir}`],
            inject: 'body'
        })),
        new MiniCSSExtractPlugin({
            filename: `${paths.assets}css/[name].css`
        }),
    ],
}

dev

const webpack = require('webpack')
const { merge } = require('webpack-merge')

const common = require('./webpack.common')
const paths = require('./paths')

module.exports = merge(common, {
    mode: 'development',
    target: 'web',
    devtool: 'source-map',
    devServer: {
        contentBase: paths.dist,
        open: true,
        hot: true,
        port: 8080,
        writeToDisk: true,
        serveIndex: true,
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
})

prod

const { merge } = require('webpack-merge')

const paths = require('./paths')
const common = require('./webpack.common.js')

module.exports = merge(common, {
    mode: 'production',
})

структура проекта:

Answer 1

[Афанасий]

Помогло вот это:

output: {
 publicPath: '../../'
}

Answer 2

[Denis Masson]

Вы сами ответили на свой вопрос, "После сборки Вебпаком".
Мне кажется этот скриншот на главной странице вебпака объяснит Вам в чем дело>

Comments

[Афанасий]

спасибо, но я немного не то имел ввиду. Почему вебпак пишет путь до картинки не относительно файла стилей, а относительно папки dist?

[Denis Masson]

Иван, потому что в итоге после сборки проекта, Ваше изображение будет не там где Вы его задали, а в папке dist/assets

[Афанасий]

Denis Masson, это понятно, но как мне сделать так, чтобы в файле стилей до картинки указывался путь, относительно этого самого файла стилей? В Статье о node-sass писалось, что для этих нужд нужен resolve-url-loader, но у меня и с ним не работает :(

Answer 3

[Егор Данченко]

Поле assetModuleFilename указывает, куда попадут файлы после сборки. Удалите свойство, либо переопределите значение. Все изображения после сборки окажутся по пути outputPath/assetModuleFilename