I’m using a webpack plugin (imagemin-webp-webpack-plugin) to convert images to webp. Everything works fine on the bud process and the webp image files are created inside the /public folder, but the problem is that these new files are not reflected on the manifest.json file and this means I can’t use them like this: @asset('images/home/about/mobile-about-section.webp').
I also tried the @roots/bud-imagemin extension, but when I add ?as=webp the file is still loaded as jpg.
This is my bud config:
import SVGSpritemapPlugin from 'svg-spritemap-webpack-plugin'
import ImageminWebpWebpackPlugin from 'imagemin-webp-webpack-plugin'
/**
* Build configuration
*
* @see {@link https://bud.js.org/guides/getting-started/configure}
* @param {import('@roots/bud').Bud} app
*/
export default async (app) => {
app
/**
* Application entrypoints
*
* Paths are relative to your resources directory
*/
.entry({
app: ['@scripts/app.js', '@styles/app.scss']
})
/**
* These files should be processed as part of the build
* even if they are not explicitly imported in application assets.
*/
.assets(['images'])
.assets(['fonts'])
/**
* These files will trigger a full page reload
* when modified.
*/
.watch('resources/views/**/*', 'app/**/*')
.setPublicPath('/app/themes/my-theme/public/')
await app.use(
new SVGSpritemapPlugin('resources/sprite/*.svg', {
output: {
filename: 'spritesheet.svg',
chunk: { keep: true },
svgo: false
}
})
)
await app
.use(new ImageminWebpWebpackPlugin())
/**
* Target URL to be proxied by the dev server.
*
* This is your local dev server.
*/
.proxy(process.env.WP_HOME)
/**
* Development URL
*/
.serve(`${process.env.WP_HOME}:3000`)
}
I tried changing the order of the plugin use, but with no effect.
I got the latest bud (6.6.2) that fixes this issue, but still I’m not able to make it work.
According to documentation, it’s supposed to work out of the box without any configuration in the bud.config.mjs file.
I have the library installed on package.json.
I tried to add this just to make a quick test:
body {
background-image: url('../../images/home/about/mobile-about-section.jpg?as=webp');
}
but still the file is as jpeg.
Furthermore, I want to get the file directly on the blade view with @asset(). Is this possible?