Изменить путь к ресурсу изображения в конфигурации Webpack

У меня возникают проблемы с Webpack / Encore, когда URL-адреса моих изображений не отображаются правильно.

homepage.scss:

body {
    background: #FFEFE2 url("../../img/bg.jpg") no-repeat;
}

Сгенерированная разметка:

body {
    background: #FFEFE2 url(/build/images/bg.9f6bc44a.jpg) no-repeat;
}

Мое приложение находится под /app, поэтому правильным URL-адресом будет /app/build/images/bg.9f6bc44a.jpg.

Конфигурация моего Webpack на бис:

var Encore = require('@symfony/webpack-encore');

Encore
// directory where compiled assets will be stored
    .setOutputPath('web/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')

    /*
     * ENTRY CONFIG
     *
     * Add 1 entry for each "page" of your app
     * (including one that's included on every page - e.g. "app")
     *
     * Each entry will result in one JavaScript file (e.g. app.js)
     * and one CSS file (e.g. app.css) if you JavaScript imports CSS.
     */
    .addEntry('app', './web/assets/js/app.js')

    // will require an extra script tag for runtime.js
    // but, you probably want this, unless you're building a single-page app
    .enableSingleRuntimeChunk()

    .cleanupOutputBeforeBuild()

    .enableSourceMaps(!Encore.isProduction())

    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())

    // uncomment if you use Sass/SCSS files
    .enableSassLoader()

    // uncomment if you're having problems with a jQuery plugin
    .autoProvidejQuery()
;

module.exports = Encore.getWebpackConfig();

Вам следует изменить настройку file-loaderpublicPath.

— 10.12.2018 12:27

symfony webpack webpack-encore

10.12.2018 09:31

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Symfony Station Communiqué - 7 июля 2023 г

Это коммюнике первоначально появилось на Symfony Station .

Symfony Station Communiqué - 17 февраля 2023 г

Это коммюнике первоначально появилось на Symfony Station , вашем источнике передовых новостей Symfony, PHP и кибербезопасности.

Управление ответами api для исключений на Symfony с помощью KernelEvents

Много раз при создании api нам нужно возвращать клиентам разные ответы в зависимости от возникшего исключения.

2 004

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете использовать Копировать Плагин Webpack. После добавления его в свои зависимости измените свой webpack.config.js вот так:

const CopyWebpackPlugin = require('copy-webpack-plugin');

.addEntry('app', './assets/js/app.js')
.....
.addPlugin(new CopyWebpackPlugin([
        // copies to {output}/static
        { from: './assets/static', to: 'static' }
    ]))
;

После перезапуска Encore вы можете использовать изображения следующим образом:

<img src = "{{ asset('build/static/foo.jpg') }}" />

10.12.2018 12:25

Ответ принят как подходящий

Encore
   // directory where compiled assets will be stored
   .setOutputPath('web/build/')
   // public path used by the web server to access the output path
   .setPublicPath('/app/build')
   // only needed for CDN's or sub-directory deploy
   .setManifestKeyPrefix('build/')

Просто измените currentPath и setManifestKeyPrefix.

Спасибо за этот ответ. Мне также пришлось вызвать в setManifestKeyPrefix и соответственно обновить ваш ответ.

— 11.12.2018 03:20

10.12.2018 12:56