❤
npm
Sign UpSign In

webmanifest-loader

0.3.0 • Public • Published

webmanifest loader for webpack Version Build Status

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-loader

Usage

Documentation: Using loaders

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": "./screenshot@2x.jpg",
      "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

> example@1.0.0 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]
   screenshot@2x.jpg    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]
       screenshot@2x.jpg    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/screenshot@2x.jpg 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 module

Go to the example folder and try it yourself:

$ cd example
$ npm install
$ npm run build

Meta

Contributors

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.

Readme

Keywords

none

Package Sidebar

Install

npm i webmanifest-loader

Repository

github.com/unindented/webmanifest-loader

Homepage

github.com/unindented/webmanifest-loader#readme

Weekly Downloads

313

Version

0.3.0

License

MIT

Unpacked Size

9.69 kB

Total Files

4

Last publish

Collaborators

  • unindented
Try on RunKit
Report malware