{"id":20700,"library":"web-app-manifest-loader","title":"Web App Manifest Loader","description":"Webpack loader that resolves image paths in the `icons` and `splash_screens` fields of a Web App Manifest. Version 0.1.1 is current, last released several years ago with no active maintenance. This loader delegates to other loaders (e.g., file-loader) to handle image files. Unlike alternatives that require manual image processing, it automates asset management within manifests. It is deprecated in favor of modern webpack 5 asset modules and direct imports, as it is no longer actively developed.","status":"deprecated","version":"0.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/markdalgleish/web-app-manifest-loader","tags":["javascript"],"install":[{"cmd":"npm install web-app-manifest-loader","lang":"bash","label":"npm"},{"cmd":"yarn add web-app-manifest-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add web-app-manifest-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"commonly chained to output manifest file","package":"file-loader","optional":true}],"imports":[{"note":"This is a webpack loader, not imported in application code. Use in webpack config module.rules.","wrong":"import webAppManifestLoader from 'web-app-manifest-loader'","symbol":"default","correct":"module.exports = require('web-app-manifest-loader')"},{"note":"Loader must be chained with file-loader; using alone won't output the manifest file.","wrong":"{\n  test: /manifest.json$/,\n  use: 'web-app-manifest-loader'\n}","symbol":"Webpack rule","correct":"{\n  test: /manifest.json$/,\n  loader: 'file-loader?name=manifest.json!web-app-manifest-loader'\n}"},{"note":"Works with both, but require is traditional for webpack 1/2.","wrong":"import manifest from './manifest.json'","symbol":"require in app code","correct":"require('./manifest.json')"}],"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n  entry: './src/index.js',\n  output: { filename: 'bundle.js' },\n  module: {\n    rules: [\n      {\n        test: /\\.json$/,\n        use: [\n          {\n            loader: 'file-loader',\n            options: { name: 'manifest.[ext]' }\n          },\n          {\n            loader: 'web-app-manifest-loader'\n          }\n        ]\n      }\n    ]\n  }\n};\n\n// manifest.json (in src/)\n{\n  \"name\": \"App\",\n  \"icons\": [{\n    \"src\": \"./icon-512.png\",\n    \"sizes\": \"512x512\",\n    \"type\": \"image/png\"\n  }]\n}\n\n// src/index.js\nconst manifest = require('./manifest.json');\nconsole.log(manifest); // resolved with webpack asset paths","lang":"javascript","description":"Shows webpack config chaining file-loader and web-app-manifest-loader, and application code requiring the manifest."},"warnings":[{"fix":"Consider using webpack 5 asset modules or inline image imports in manifest.","message":"Package is no longer actively maintained; last release was years ago.","severity":"deprecated","affected_versions":">=0.0.0"},{"fix":"Ensure your manifest file matches the test pattern and is valid JSON.","message":"Loader only processes JSON files; if you use a different extension or custom format, it won't work.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Add file-loader to the loader chain as shown in the quickstart.","message":"Must be chained with a file-output loader like file-loader; alone it doesn't emit the manifest file.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Use relative paths starting with './' in manifest.json, e.g., './images/icon.png'.","cause":"Image path in manifest not found relative to manifest file location.","error":"Module not found: Error: Can't resolve '/path/to/icon.png' in '...'"},{"fix":"Add web-app-manifest-loader and file-loader to webpack config as shown in quickstart.","cause":"Missing loader for JSON files or wrong chain order.","error":"You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}