webpack-webmanifest-loader

2.0.2 verified Sat Apr 25 auth: no javascript

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.

Common errors

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. ↓

cause Webpack does not have a rule to handle .webmanifest files.

fix

Add the loader rule as shown in the quickstart: { test: /\.webmanifest$/i, use: 'webpack-webmanifest-loader', type: 'asset/resource' }.

error Error: Cannot find module 'webpack-webmanifest-loader' ↓

cause Package not installed or incorrectly referenced.

fix

Run 'npm install -D webpack-webmanifest-loader' and ensure the loader name is correct in webpack config.

error Module not found: Error: Can't resolve '../images/touch/homescreen48.png' ↓

cause Icon path in manifest is not resolvable by webpack.

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.

Warnings

breaking Package renamed from webpack-webmanifest-plugin to webpack-webmanifest-loader. Previous installs may have old package. ↓

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.

breaking Requires webpack 5.1+. Will not work with webpack 4. ↓

fix Ensure webpack version is 5.1 or higher. Upgrade if necessary.

gotcha The loader expects 'type: 'asset/resource'' in the rule; otherwise, the manifest output may not be emitted correctly. ↓

fix Add type: 'asset/resource' to the .webmanifest rule in webpack config.

gotcha Icon paths in the manifest must be resolvable by webpack (e.g., relative paths or module aliases). Absolute paths may not be processed. ↓

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).

deprecated No updates since v2.0.2 (late 2021). May not be actively maintained. Consider using alternative solutions. ↓

fix Evaluate if the still works for your webpack version. For critical projects, consider alternatives like favicons-webpack-plugin or manual manifest generation.

Install

npm install webpack-webmanifest-loader

yarn add webpack-webmanifest-loader

pnpm add webpack-webmanifest-loader

Imports

default

wrong

const webpackWebmanifestLoader = require('webpack-webmanifest-loader');

correct

module.exports = { module: { rules: [ { test: /\.webmanifest$/i, use: 'webpack-webmanifest-loader', type: 'asset/resource' } ] } }

This is a webpack loader, not a standalone module. It is used via webpack config rules, not imported directly.

Quickstart

Webpack configuration using the loader to process .webmanifest files and icon assets.

// webpack.config.js
const path = require('path');
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.(png|svg|webp|jpg|jpeg)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.webmanifest$/i,
        use: 'webpack-webmanifest-loader',
        type: 'asset/resource',
      },
    ],
  },
};