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