Webpack-webmanifest-loader NPM

webpack-webmanifest-loader

Minimalistic webpack loader to generate webmanifest file (and process icons URLs).

Compatible with webpack 5 only (5.1+ required).
Zero dependency.
Cache busting support.

Getting Started

npm install -D webpack-webmanifest-loader

manifest.webmanifest

{
  "name": "HackerWeb",
  "icons": [
    {
      "src": "../images/touch/homescreen48.png",
      "sizes": "48x48",
      "type": "image/png"
    }
  ]
}

index.html

<head>
  <title>Example</title>
  <link rel="manifest" href="<%= require('../layout/base/manifest.webmanifest') %>" />
</head>

Then add the loader to your webpack config. For example:

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|svg|webp|jpg|jpeg)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.webmanifest$/i,
        use: 'webpack-webmanifest-loader',
        type: 'asset/resource',
      },
    ],
  },
};

With the default options, the example above will create a [contenthash].webmanifest file in the output directory for the build.

{
  "name": "HackerWeb",
  "icons": [
    {
      "src": "[contenthash].[ext]",
      "sizes": "48x48",
      "type": "image/png"
    },
  ],
}

@everything-registry/sub-chunk-3133 @infinitebrahmanuniverse/nolb-webpack-w

2.0.2

3 years ago

2.0.1

3 years ago

2.0.0

3 years ago