Skip to content

Latest commit

 

History

History
71 lines (61 loc) · 1.26 KB

README.md

File metadata and controls

71 lines (61 loc) · 1.26 KB
Raw

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"
    },
  ],
}