Как настроить webpack-spritesmith с помощью Webpack Encore?

Я работаю над проектом Symfony 3.4 и использую Webpack Encore для управления своими активами. До тех пор он работает нормально.

Я хотел бы использовать пакет webpack-spritesmith для создания спрайта изображения. Но когда я запускаю команду yarn encore dev, я сталкиваюсь с ошибкой:

{ Error: EISDIR: illegal operation on a directory, read errno: -21, code: 'EISDIR', syscall: 'read' }

Вот структура моего проекта:

/
|-assets
| |-js
| | |-app.js
| | ...
| |-images
| | |-new.png
| | |-open.png
| | |-save.png
| | |-sprites
| | | |-foo.png
| | | |-bar.png
| | | ...
| | ...
| |-scss
| | |-app.scss
| | ...
| ...
|-web
| |-build
| ...
|-webpack.config.js

Я следил за документацией пакета, чтобы настроить его, но я не уверен, что делать с оверлеем Symfony Encore.

Вот мой webpack.config.js файл:

let Encore            = require('@symfony/webpack-encore');
let SpritesmithPlugin = require('webpack-spritesmith');
let path              = require('path');

Encore
    .setOutputPath('web/build/')
    .setPublicPath('/build')
    .addEntry('app', './assets/js/app.js')
    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .enableBuildNotifications()
    .enableSassLoader()
    .enablePostCssLoader()
    .addLoader({
        test: /\.png$/,
        use: ['file-loader?name=images/[hash].[ext]']
    })
    .autoProvidejQuery()
    .addPlugin(new SpritesmithPlugin({
        src:        {
            cwd:  path.resolve(__dirname, './assets/images/sprites'),
            glob: '*.png'
        },
        target:     {
            image: path.resolve(__dirname, './assets/images/sprite.png'),
            css:   path.resolve(__dirname, './assets/scss/sprite.scss')
        },
        apiOptions: {
            cssImageRef: "~sprite.png"
        }
    }));

let config = Encore.getWebpackConfig();
config.resolve = {
    modules: ["node_modules", "./assets/images"]
};

module.exports = config;

Я ожидаю, что файлы будут созданы следующим образом:

  • /активы/изображения/sprite.png
  • /assets/scss/sprite.scss

Ни файл sprite.png, ни файл sprite.scss не создаются. Однако некоторые файлы PNG генерируются в каталоге web/buid/images с хешированным именем.

Проблема, похоже, вызвана подкаталогами в моем assets/images/sprites каталоге. На github открыта проблема по этому поводу: github.com/mixtur/webpack-spritesmith/issues/83

lobodol 05.04.2019 15:30
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Symfony Station Communiqué - 7 июля 2023 г
Symfony Station Communiqué - 7 июля 2023 г
Это коммюнике первоначально появилось на Symfony Station .
Оживление вашего приложения Laravel: Понимание режима обслуживания
Оживление вашего приложения Laravel: Понимание режима обслуживания
Здравствуйте, разработчики! В сегодняшней статье мы рассмотрим важный аспект управления приложениями, который часто упускается из виду в суете...
Установка и настройка Nginx и PHP на Ubuntu-сервере
Установка и настройка Nginx и PHP на Ubuntu-сервере
В этот раз я сделаю руководство по установке и настройке nginx и php на Ubuntu OS.
Коллекции в Laravel более простым способом
Коллекции в Laravel более простым способом
Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...
Как установить PHP на Mac
Как установить PHP на Mac
PHP - это популярный язык программирования, который используется для разработки веб-приложений. Если вы используете Mac и хотите разрабатывать...
0
1
566
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Это был сообщение о проблеме, который с тех пор был закрыт.

Обратите внимание, что подкаталоги теперь просто игнорируются, поэтому храните все изображения в одном каталоге.

Другие вопросы по теме