webmanifest-loader
v0.3.0
Published
Help deal with Web App Manifest files.
Downloads
1,207
Readme
webmanifest loader for webpack 
Parses your web app manifest, loading the necessary files from your icons and screenshots sections.
It also treats your web app manifest as a lodash template, so you can interpolate variables or add any other logic you need.
Installation
$ npm install --save webmanifest-loaderUsage
Say you are using html-webpack-plugin, and you want to add a web app manifest. Your HTML template template.ejs could look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title><%= htmlWebpackPlugin.options.title %></title>
<link rel="manifest" href="<%= require('./manifest.webmanifest') %>" />
</head>
<body>
<div id="root"></div>
</body>
</html>Your manifest.webmanifest file could look like this:
{
"name": "<%= name %>",
"short_name": "<%= shortName %>",
"description": "<%= description %>",
"start_url": ".",
"display": "standalone",
"icons": [
{
"src": "./icon_144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "./icon_192x192.png",
"sizes": "192x192",
"type": "image/png"
}
],
"screenshots": [
{
"src": "./screenshot.jpg",
"sizes": "640x480",
"type": "image/jpeg"
},
{
"src": "./[email protected]",
"sizes": "1280x920",
"type": "image/jpeg"
}
]
}And your webpack.config.js file would glue everything together:
var HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: {
app: './index.js'
},
output: {
path: './dist/',
filename: '[name].js'
},
module: {
rules: [
{
test: /\.webmanifest$/,
include: /assets\//,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
},
{
loader: 'webmanifest-loader',
options: {
name: 'Foobar',
shortName: 'Foobar',
description: 'Just an example.'
}
}
]
},
{
test: /\.(jpg|png)$/,
include: /assets\//,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
}
}
]
},
plugins: [
new HtmlPlugin({
title: 'Foobar',
template: './assets/template.ejs'
})
]
}Running webpack would produce all the necessary files as expected:
$ npm run build
> [email protected] build /Users/daniel/Code/webmanifest-loader/example
> webpack
Hash: 6988311fefbc63ba7777
Version: webpack 4.1.1
Time: 390ms
Built at: 2018-3-13 20:23:05
Asset Size Chunks Chunk Names
manifest.webmanifest 586 bytes [emitted]
[email protected] 0 bytes [emitted]
screenshot.jpg 0 bytes [emitted]
icon_192x192.png 0 bytes [emitted]
icon_144x144.png 0 bytes [emitted]
app.js 571 bytes 0 [emitted] app
index.html 354 bytes [emitted]
Entrypoint app = app.js
[0] ./index.js 22 bytes {0} [built]
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
manifest.webmanifest 586 bytes [emitted]
[email protected] 0 bytes [emitted]
screenshot.jpg 0 bytes [emitted]
icon_192x192.png 0 bytes [emitted]
icon_144x144.png 0 bytes [emitted]
+ 1 hidden asset
Entrypoint undefined = index.html
[0] ./assets/manifest.webmanifest 66 bytes {0} [built]
[1] (webpack)/buildin/module.js 519 bytes {0} [built]
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[4] ./node_modules/html-webpack-plugin/lib/loader.js!./assets/template.ejs 779 bytes {0} [built]
[5] ./assets/[email protected] 63 bytes [built]
[6] ./assets/screenshot.jpg 60 bytes [built]
[7] ./assets/icon_192x192.png 62 bytes [built]
[8] ./assets/icon_144x144.png 62 bytes [built]
+ 1 hidden moduleGo to the example folder and try it yourself:
$ cd example
$ npm install
$ npm run buildMeta
- Code:
git clone git://github.com/unindented/webmanifest-loader.git - Home: https://github.com/unindented/webmanifest-loader/
Contributors
- Daniel Perez Alvarez ([email protected])
License
Copyright (c) 2017 Daniel Perez Alvarez (unindented.org). This is free software, and may be redistributed under the terms specified in the LICENSE file.