{"id":20705,"library":"webp-loader","title":"webp-loader","description":"Webpack loader that converts JPEG and PNG images to WebP format using imagemin-webp under the hood. Version 0.6.0 is the latest stable release. The loader integrates with webpack's loader pipeline and is typically combined with file-loader or multi-loader to produce both original and WebP versions. Key differentiator: it provides a direct bridge between webpack and imagemin-webp, allowing configuration via query string. However, it has seen only sporadic updates and is largely superseded by more modern image optimization plugins like imagemin-webpack-plugin.","status":"maintenance","version":"0.6.0","language":"javascript","source_language":"en","source_url":"git://github.com/kavu/webp-loader","tags":["javascript","webpack","webp","image"],"install":[{"cmd":"npm install webp-loader","lang":"bash","label":"npm"},{"cmd":"yarn add webp-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add webp-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required for loader to work","package":"webpack","optional":false},{"reason":"peer dependency for running webpack","package":"webpack-cli","optional":true}],"imports":[{"note":"webp-loader is a webpack loader and should be referenced in webpack configuration, not imported in source code.","wrong":"import webpLoader from 'webp-loader' // Not meant for direct import in application code","symbol":"default","correct":"// In webpack config: { test: /\\.(jpe?g|png)$/i, use: ['file-loader', 'webp-loader'] }"},{"note":"When using multi-loader, import it separately; webp-loader does not export multi.","wrong":"import multi from 'webp-loader' // multi is from multi-loader, not from webp-loader","symbol":"multi","correct":"import multi from 'multi-loader' // Using multi-loader to bundle multiple loaders"}],"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.(jpe?g|png)$/i,\n        use: [\n          'file-loader',\n          'webp-loader'\n        ]\n      }\n    ]\n  }\n};\n\n// With options (quality 80):\n{\n  test: /\\.(jpe?g|png)$/i,\n  use: [\n    'file-loader',\n    {\n      loader: 'webp-loader',\n      options: {\n        quality: 80\n      }\n    }\n  ]\n}","lang":"javascript","description":"Shows basic webpack config to convert images to WebP using webp-loader alongside file-loader, including passing options."},"warnings":[{"fix":"Consider migrating to imagemin-webpack-plugin or sharp-based solutions.","message":"Package has low maintenance and is essentially deprecated in favor of webpack plugins like imagemin-webpack-plugin or next-gen tools like sharp.","severity":"deprecated","affected_versions":">=0"},{"fix":"Use multi-loader to apply two loader pipelines as shown in README.","message":"Loader only works when chained after file-loader; if you want both original and WebP versions, you must use multi-loader or custom logic.","severity":"gotcha","affected_versions":">=0"},{"fix":"Use object format via options property in webpack config.","message":"Options must be passed as JSON string in query string or as object in 'options' property; the query string format may cause issues with complex options.","severity":"gotcha","affected_versions":">=0"},{"fix":"Pin webpack version to 4 or manually adjust loader; consider migration.","message":"Peer dependency on webpack * (any version) may cause compatibility issues with webpack 5; not tested with webpack 5.","severity":"breaking","affected_versions":">=0.5.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run npm install webp-loader --save-dev","cause":"webp-loader not installed as devDependency.","error":"Module not found: Error: Can't resolve 'webp-loader'"},{"fix":"Install webpack and webpack-cli: npm install webpack webpack-cli --save-dev","cause":"Missing peer dependencies.","error":"Error: webp-loader requires webpack and webpack-cli as peer dependencies."},{"fix":"Use the options object in webpack config: { loader: 'webp-loader', options: { quality: 80 } }","cause":"Options passed in query string format are not parsed correctly when not using the object form.","error":"ValidationError: Invalid options object. webp-loader has been initialized using an options object that does not match the API schema."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}