Question

我正在从事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;

我希望文件生成如下：

/assets/images/sprite.png
/assets/scss/sprite.scss

sprite.png和sprite.scss文件均未创建。但是，某些PNG会在web/buid/images目录中以哈希名称生成。

Answer 1

这是reported issue，此后已关闭。

请注意，现在仅会忽略子目录，因此请将所有图像保存在同一目录中。

如何使用Webpack Encore配置webpack-spritesmith？

1 个答案: