如何使用 Webpack Encore 配置 webpack-spritesmith?
How to configure webpack-spritesmith with 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;
我希望生成的文件如下:
- /assets/images/sprite.png
- /assets/scss/sprite.scss
sprite.png
和 sprite.scss
文件均未创建。但是,一些 PNG 是在 web/buid/images
目录中生成的,具有散列名称。
这是一个 reported issue,此后已关闭。
请注意,子目录现在会被忽略,因此请将所有图像放在同一目录中。
我正在做一个 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
目录中生成的,具有散列名称。
这是一个 reported issue,此后已关闭。
请注意,子目录现在会被忽略,因此请将所有图像放在同一目录中。