Webpack 5 и background-image инлайном?

Question

[leviathan]

Как заставить webpack 5 подключать изображения, которые указанны инлайном.
Пример:

<!--Работает-->
<img src="src/assets/img/test_image.jpg" alt="">
<!--Не работает-->
<div style="background-image: url('src/assets/img/test_image.jpg')"></div>

webpack.config.js

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


module.exports = {
    mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',

    entry: {
        main: path.resolve(__dirname, './src/js/index.js')
    },

    output: {
        filename: 'js/index_bundle.js',
        assetModuleFilename: "assets/[hash][ext][query]",
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'babel-loader'
            },
            {
                test: /\.(scss|sass|css)$/,
                use: [
                    (process.env.NODE_ENV === 'production') ? MiniCssExtractPlugin.loader : 'style-loader',
                    'css-loader',
                    'postcss-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.html$/,
                use: ['html-loader']
            },
            {
                test: /\.(woff|woff2)$/,
                type: 'asset/resource'
            },
            {
                test: /\.(png|jpg|svg)$/,
                type: "asset/resource"
            }
        ]
    },

    devServer: {
        static: {
            directory: path.join(__dirname, 'src/views')
        },
        port: 9000,
        compress: true,
    },

    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].[contenthash].css'
        }),
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: __dirname + "/src/views/home.html",
            filename: "index.html",
            inject: 'body',
            hot: true
        }),
    ],
}

Answer 1

[black1277]

Есть одно решение, но для картинок без хеша в имени (их придется просто скопировать по нужному адресу)
background-image инлайном
но честно говоря, проще руки выпрямить верстальщику, который пишет код методом 15летней давности :)

Comments

[leviathan]

Угу. Но для наших задач необходим именно background-image и именно инлайном ¯ \ _ (ツ) _ / ¯