Webpack - динамически вставляемый путь

Question

Я пытаюсь динамически добавить встроенный URL-адрес фонового изображения в элемент DOM.Проблема в том, что при вставке в DOM имя изображения не хэшируется и, следовательно, не соответствует имени целевого изображения.

Например, вот объект, который я пытаюсь использовать:

var project = {
        title: "Foobar",
        image: "../img/foobar.jpg"
    };

И вот что создает Javascript в DOM:

<div style="background-image: url(../img/foobar.jpg)"></div>

... когда мне на самом деле нужно что-то вроде:

<div style="background-image: url(2faf750010d2109a74e1ce1d02.jpg)"></div>

Вот мой веб-пакет.config.js

const path = require("path");

let config = {
    mode: "development",
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "./app"),
        filename: "./bundle.js"
    },
    watch: true,
    module: {
        rules: [
            {
              test: /\.s?css$/,
              use: [
                { loader: "style-loader" },
                { loader: "css-loader" },
                { loader: "sass-loader" }
              ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
                loader: 'file-loader'
            }
        ]
    }
}

module.exports = config;

Это на самом деле работает, если я просто добавляю имя класса с помощью JavaScript и управляю фоновым изображением с помощью CSS, поскольку пути CSS правильно хешируются, но в данный момент это не совсем то, что мне нужно: /

Спасибо за любую помощь!

Answer 1

Чтобы получить URL ресурса Webpack вместо исходного источника с file-loader, require it:

var project = {
    title: "Foobar",
    image: require("../img/foobar.jpg"),
};