manifest-creator-webpack-plugin v2.3.17

Manifest Creator Webpack Plugin

manifest-creator-webpack-plugin is a webpack plugin for creating progressive web app manifest files. It exports a manifest file to the build directory.

Features

• Export icons defined in the manifest file
• Automatically add type for icons
• Minify the manifest file
• Inject manifest link to pages generated with html-webpack-plugin

Installation

Install manifest-creator-webpack-plugin as a dev dependency:

npm install --save-dev manifest-creator-webpack-plugin

You will also need to have webpack installed:

npm install --save-dev webpack

To use the full feature set of the plugin, also install html-webpack-plugin:

npm install --save-dev html-webpack-plugin

Usage

In your Webpack configuration file, import manifest-creator-webpack-plugin. Add it to your plugins array (if used with html-webpack-plugin, html-webpack-plugin must come first in the array):

webpack.config.js

const ManifestCreatorWebpackPlugin = require("manifest-creator-webpack-plugin");

module.exports = {
  // ...
  plugins: [
    new ManifestCreatorWebpackPlugin()
  ]
}

manifest-creator-webpack-plugin will look for src/manifest.webmanifest. It will then validate the contents of the manifest. If it is valid, the plugin will then output it in your build folder as manifest.webmanifest. All icons will be emitted in an icons directory inside your build folder.

Configuration

manifest-creator-webpack-plugin works with no configuration, but you can pass a configuration object to the plugin to customize its functionality.

const ManifestCreatorWebpackPlugin = require("manifest-creator-webpack-plugin");

module.exports = {
  // ...
  plugins: [
    new ManifestCreatorWebpackPlugin({
      filename: "[id].manifest[ext]",
      source: "src/manifest.webmanifest",
      inject: true,
      
      icons: {
        filename: "[id].icon[ext]",
        folder: "icons"

        types: {
          ".webp": "image/webp"
        }
      },

      development: {
        mode: "development",
        spacing: 2
      }
    })
  ]
}

filename

Type: String

Default: "manifest.webmanifest"

The destination for the output manifest file, relative to the ouput directory. Can include the following parameters:

• [ext]: the extension of the source manifest file
• [id]: will always be equal to 0
• [name]: the name of the source manifest file (excluding the extension)

source

Type: String

Default: "src/manifest.webmanifest"

The location of the source manifest file, relative to the Webpack configuration file.

inject

Type: Boolean

Default: true if html-webpack-plugin is found, otherwise false

Whether to inject a link to the manifest file inside pages generated with html-webpack-plugin.

validateManifest

Type: Boolean

Default: true

Whether to validate the source manifest file.

icons

Type: Object

Default: {}

Icon configuration (see below).

icons.filename

Type: String

Default: the name of the source icon

The destination filename for icons. Can include the following parameters:

• [ext]: the extension of the source icon
• [id]: an id for the icon
• [name]: the name of the source icon

icons.folder

Type: String

Default: "icons"

The destination folder for icons, relative to the location of the output manifest file.

icons.types

Type: Object

Default:

  {
    ".jpg": "image/jpeg",
    ".jpeg": "image/jpeg",
    ".ico": "image/x-icon",
    ".png": "image/png",
    ".svg": "image/svg+xml"
  }

Types to associate with icon extensions. Overwriting one of the default values will only overwrite that value.

development

Type: Object

Default: {}

Development build options (see below).

development.mode

Type: String

Default: the mode property in webpack.config.js

The output mode to use ("development" or "production").

development.spacing

Type: Number

Default: 2

The number of spaces to use as whitespace in the output manifest file (only applies if development.mode is not "production").