Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/usmanyunusov/webpack-webmanifest-loader
Minimalistic webpack loader to generate webmanifest file (and process icons URLs).
https://github.com/usmanyunusov/webpack-webmanifest-loader
webmanifest webpack-loader
Last synced: 3 months ago
JSON representation
Minimalistic webpack loader to generate webmanifest file (and process icons URLs).
- Host: GitHub
- URL: https://github.com/usmanyunusov/webpack-webmanifest-loader
- Owner: usmanyunusov
- License: mit
- Created: 2021-05-28T11:26:50.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-03-24T19:04:40.000Z (almost 2 years ago)
- Last Synced: 2024-10-14T08:10:04.912Z (3 months ago)
- Topics: webmanifest, webpack-loader
- Language: JavaScript
- Homepage: https://npm.im/webpack-webmanifest-loader
- Size: 180 KB
- Stars: 18
- Watchers: 2
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```console
npm install -D webpack-webmanifest-loader
```
#### manifest.webmanifest
```json
{
"name": "HackerWeb",
"icons": [
{
"src": "../images/touch/homescreen48.png",
"sizes": "48x48",
"type": "image/png"
}
]
}
```
#### index.html
```html
Example
```
Then add the loader to your webpack config. For example:
#### webpack.config.js
```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.
```json
{
"name": "HackerWeb",
"icons": [
{
"src": "[contenthash].[ext]",
"sizes": "48x48",
"type": "image/png"
},
],
}
```