Web App Manifest Loader

0.1.1 verified Sat Apr 25 auth: no javascript deprecated

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.

Common errors

error Module not found: Error: Can't resolve '/path/to/icon.png' in '...' ↓

cause Image path in manifest not found relative to manifest file location.

fix

Use relative paths starting with './' in manifest.json, e.g., './images/icon.png'.

error You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. ↓

cause Missing loader for JSON files or wrong chain order.

fix

Add web-app-manifest-loader and file-loader to webpack config as shown in quickstart.

Warnings

deprecated Package is no longer actively maintained; last release was years ago. ↓

fix Consider using webpack 5 asset modules or inline image imports in manifest.

gotcha Loader only processes JSON files; if you use a different extension or custom format, it won't work. ↓

fix Ensure your manifest file matches the test pattern and is valid JSON.

gotcha Must be chained with a file-output loader like file-loader; alone it doesn't emit the manifest file. ↓

fix Add file-loader to the loader chain as shown in the quickstart.

Install

npm install web-app-manifest-loader

yarn add web-app-manifest-loader

pnpm add web-app-manifest-loader

Imports

default

wrong

import webAppManifestLoader from 'web-app-manifest-loader'

correct

module.exports = require('web-app-manifest-loader')

This is a webpack loader, not imported in application code. Use in webpack config module.rules.

Webpack rule

wrong

{
  test: /manifest.json$/,
  use: 'web-app-manifest-loader'
}

correct

{
  test: /manifest.json$/,
  loader: 'file-loader?name=manifest.json!web-app-manifest-loader'
}

Loader must be chained with file-loader; using alone won't output the manifest file.

require in app code
wrong
```
import manifest from './manifest.json'
```
correct
```
require('./manifest.json')
```
Works with both, but require is traditional for webpack 1/2.

Quickstart

Shows webpack config chaining file-loader and web-app-manifest-loader, and application code requiring the manifest.

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: { filename: 'bundle.js' },
  module: {
    rules: [
      {
        test: /\.json$/,
        use: [
          {
            loader: 'file-loader',
            options: { name: 'manifest.[ext]' }
          },
          {
            loader: 'web-app-manifest-loader'
          }
        ]
      }
    ]
  }
};

// manifest.json (in src/)
{
  "name": "App",
  "icons": [{
    "src": "./icon-512.png",
    "sizes": "512x512",
    "type": "image/png"
  }]
}

// src/index.js
const manifest = require('./manifest.json');
console.log(manifest); // resolved with webpack asset paths