Why does the url of the image change after Webpack build?

Question

webpack

background: url(../img/intro__bg.jpg) in main.scss I write this path to the image, the output is: background:url(assets/img/intro__bg.jpg.

tried to process scss using resolve-url-loader, but didn't help

...
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,
                    }
                  }]
            },

...

Webpack code:

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()
    ]
})

product

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

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

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

project structure:

Answer 1

This helped:

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

Answer 2

You answered your own question, "After building with Webpack".
I think this screenshot on the main webpack page will tell you what's going on>

Answer 3

The assetModuleFilename field specifies where the files will go after the build. Delete the property or redefine the value. All images after assembly will be on the path outputPath/assetModuleFilename