{"id":20857,"library":"webpack-webmanifest-loader","title":"webpack-webmanifest-loader","description":"A minimalistic webpack loader that generates Web App Manifest files (webmanifest) and processes icon URLs with cache busting. It requires webpack 5.1+ and has zero runtime dependencies. Unlike plugins that generate manifests separately, this loader integrates into webpack's module graph, allowing icons to be processed through the asset module pipeline. Version 2.0.2 is the latest stable release, with the package renamed from webpack-webmanifest-plugin in v2.0.1. Release cadence is sporadic, with no updates since late 2021. Key differentiators: zero dependencies, content hash support for icons, and simple configuration.","status":"active","version":"2.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/usmanyunusov/webpack-webmanifest-loader","tags":["javascript"],"install":[{"cmd":"npm install webpack-webmanifest-loader","lang":"bash","label":"npm"},{"cmd":"yarn add webpack-webmanifest-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add webpack-webmanifest-loader","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This is a webpack loader, not a standalone module. It is used via webpack config rules, not imported directly.","wrong":"const webpackWebmanifestLoader = require('webpack-webmanifest-loader');","symbol":"default","correct":"module.exports = { module: { rules: [ { test: /\\.webmanifest$/i, use: 'webpack-webmanifest-loader', type: 'asset/resource' } ] } }"}],"quickstart":{"code":"// webpack.config.js\nconst path = require('path');\nmodule.exports = {\n  mode: 'development',\n  entry: './src/index.js',\n  output: {\n    filename: 'bundle.js',\n    path: path.resolve(__dirname, 'dist'),\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.(png|svg|webp|jpg|jpeg)$/i,\n        type: 'asset/resource',\n      },\n      {\n        test: /\\.webmanifest$/i,\n        use: 'webpack-webmanifest-loader',\n        type: 'asset/resource',\n      },\n    ],\n  },\n};","lang":"javascript","description":"Webpack configuration using the loader to process .webmanifest files and icon assets."},"warnings":[{"fix":"Uninstall old package (npm uninstall webpack-webmanifest-plugin) and install new package (npm install -D webpack-webmanifest-loader). Update webpack config to use loader name.","message":"Package renamed from webpack-webmanifest-plugin to webpack-webmanifest-loader. Previous installs may have old package.","severity":"breaking","affected_versions":">=1.0.0 <2.0.0"},{"fix":"Ensure webpack version is 5.1 or higher. Upgrade if necessary.","message":"Requires webpack 5.1+. Will not work with webpack 4.","severity":"breaking","affected_versions":">=0.0.0"},{"fix":"Add type: 'asset/resource' to the .webmanifest rule in webpack config.","message":"The loader expects 'type: 'asset/resource'' in the rule; otherwise, the manifest output may not be emitted correctly.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use relative paths from the manifest file to the icon assets, and ensure those assets are handled by a loader (e.g., asset/resource).","message":"Icon paths in the manifest must be resolvable by webpack (e.g., relative paths or module aliases). Absolute paths may not be processed.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Evaluate if the still works for your webpack version. For critical projects, consider alternatives like favicons-webpack-plugin or manual manifest generation.","message":"No updates since v2.0.2 (late 2021). May not be actively maintained. Consider using alternative solutions.","severity":"deprecated","affected_versions":">=2.0.2"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Add the loader rule as shown in the quickstart: { test: /\\.webmanifest$/i, use: 'webpack-webmanifest-loader', type: 'asset/resource' }.","cause":"Webpack does not have a rule to handle .webmanifest files.","error":"Error: Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file."},{"fix":"Run 'npm install -D webpack-webmanifest-loader' and ensure the loader name is correct in webpack config.","cause":"Package not installed or incorrectly referenced.","error":"Error: Cannot find module 'webpack-webmanifest-loader'"},{"fix":"Ensure the icon path is correct relative to the manifest file, and that the image file exists. Also ensure the image rule is configured to handle png files.","cause":"Icon path in manifest is not resolvable by webpack.","error":"Module not found: Error: Can't resolve '../images/touch/homescreen48.png'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}