# webapp-webpack-plugin
> Let webpack generate your progressive web app icons for you
Latest version **2.7.1** (published 2019-06-27) · MIT license · 0 weekly downloads
> **Deprecated.** This package is deprecated.
## Install
```sh
npm install webapp-webpack-plugin
pnpm add webapp-webpack-plugin
yarn add webapp-webpack-plugin
bun add webapp-webpack-plugin
```
## Health
**Score 10/100 (F)** — status: deprecated.
Negative: deprecated.
## Facts
| | |
|---|---|
| Version | 2.7.1 |
| Published | 2019-06-27 |
| First published | 2018-02-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 23.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 125 |
| Author | Bruno Dutra |
| Maintainers | brunocodutra |
| Keywords | webpack, plugin, html-webpack-plugin, webapp, pwa, manifest, favicon, icon, png, svg |
## Links
- npm: https://www.npmjs.com/package/webapp-webpack-plugin
- Repository: https://github.com/brunocodutra/webapp-webpack-plugin
- Issues: https://github.com/brunocodutra/webapp-webpack-plugin/issues
- npm.io page: https://npm.io/package/webapp-webpack-plugin
## Dependencies (9)
- [tapable](https://npm.io/package/tapable.md) ^1.1.3
- [favicons](https://npm.io/package/favicons.md) 5.4.1
- [camelcase](https://npm.io/package/camelcase.md) ^5.3.1
- [find-root](https://npm.io/package/find-root.md) ^1.1.0
- [cache-loader](https://npm.io/package/cache-loader.md) ^3.0.1
- [loader-utils](https://npm.io/package/loader-utils.md) ^1.2.3
- [msgpack-lite](https://npm.io/package/msgpack-lite.md) ^0.1.26
- [parse-author](https://npm.io/package/parse-author.md) ^2.0.0
- [find-cache-dir](https://npm.io/package/find-cache-dir.md) ^2.1.0
## Alternatives
- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads
## Recent versions
- 2.7.1 (latest) — 2019-06-27
- 3.0.0-beta.2 (next) — 2019-07-23
- 3.0.0-beta.1 — 2019-07-06
- 2.7.0 — 2019-04-19
- 2.6.1 — 2019-03-09
- 2.6.0 — 2019-01-23
- 2.5.0 — 2019-01-13
- 2.4.0 — 2018-11-24
- 2.3.1 — 2018-09-20
- 2.3.0 — 2018-07-22
- 2.2.0 — 2018-06-09
- 2.1.0 — 2018-05-11
- 2.0.3 — 2018-04-14
- 2.0.2 — 2018-04-08
- 2.0.1 — 2018-04-05
- … 9 more at https://npm.io/package/webapp-webpack-plugin/versions
## README
[](http://badge.fury.io/js/webapp-webpack-plugin)
[](https://coveralls.io/github/brunocodutra/webapp-webpack-plugin?branch=master)
[](https://travis-ci.org/brunocodutra/webapp-webpack-plugin)
[](https://ci.appveyor.com/project/brunocodutra/webapp-webpack-plugin/branch/master)
[](https://greenkeeper.io/)
[](https://david-dm.org/brunocodutra/webapp-webpack-plugin)
Leverages on [favicons] to automatically generate your progressive web app for you.
> Originally forked from [jantimon/favicons-webpack-plugin](https://github.com/jantimon/favicons-webpack-plugin)
> [What's new?](https://github.com/brunocodutra/webapp-webpack-plugin/releases)
## Installation
Install the plugin with npm:
```shell
$ npm install --save-dev webapp-webpack-plugin
```
## Basic Usage
Add the plugin to your webpack config as follows:
```javascript
const WebappWebpackPlugin = require('webapp-webpack-plugin')
...
plugins: [
new WebappWebpackPlugin('/path/to/logo.png') // svg works too!
]
```
The default configuration will automatically generate webapp manifest files along with
[44 different icon formats](https://github.com/brunocodutra/webapp-webpack-plugin/tree/master/test/fixtures/expected/default)
as appropriate for iOS devices, Android devices, Windows Phone and various desktop browsers out of your single `logo.png`.
> **Tip:** You might want to [fine tune](#advanced-usage) what vendors to support.
### A Note on Path Resolution
Under the hood, Webpack resolves the path to logo according to the following
rules:
* If `/path/to/logo` is absolute, there is nothing to resolve and the path
specified is used as is.
* If `./path/to/logo` is relative, it's resolved with respect to Webpack's
[`context`](https://webpack.js.org/configuration/entry-context/#context),
which defaults to `process.cwd()`.
* If `path/to/logo` is neither explicitly relative nor absolute,
Webpack attempts to resolve it according to
[`resolve.modules`](https://webpack.js.org/configuration/resolve/#resolve-modules),
which defaults to `modules: ["node_modules"]`.
### HTML Injection
In combination with [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) it will also inject the necessary html for you:
> **Note**: `html-webpack-plugin` _must_ come before `webapp-webpack-plugin` in the plugins array.
```html
```
> https://github.com/brunocodutra/webapp-webpack-plugin/blob/master/test/fixtures/expected/html
## Advanced Usage
```javascript
plugins: [
new WebappWebpackPlugin({
// Your source logo (required)
logo: '/path/to/logo.png',
// Enable caching and optionally specify the path to store cached data
// Note: disabling caching may increase build times considerably
cache: true,
// Override the publicPath option usually read from webpack configuration
publicPath: '/static',
// The directory to output the assets relative to the webpack output dir.
// Relative string paths are allowed here ie '../public/static'. If this
// option is not set, `prefix` is used.
outputPath: '/public/static',
// Prefix path for generated assets
prefix: 'assets/',
// Inject html links/metadata (requires html-webpack-plugin).
// This option accepts arguments of different types:
// * boolean
// `false`: disables injection
// `true`: enables injection if that is not disabled in html-webpack-plugin
// * string
// `'force'`: enables injection even if that is disabled in html-webpack-plugin
// * function
// any predicate that takes an instance of html-webpack-plugin and returns either
// `true` or `false` to control the injection of html metadata for the html files
// generated by this instance.
inject: true,
// Favicons configuration options (see below)
favicons: {
...
}
})
]
```
To fine tune what icons/metadata is generated, refer to
[favicons' documentation](https://github.com/haydenbleasel/favicons#usage).
The options specified under `favicons:` are handed over as is to [favicons],
except that if `appName`, `appDescription`, `version`, `developerName` or
`developerURL` are left `undefined`, they will be automatically inferred
respectively from `name`, `description`, `version`, `author.name` and
`author.url` as defined in the nearest `package.json` if available.
To disable automatically retrieving metadata from `package.json`, simply set
to `null` the properties you want to omit.
### Examples
#### Basic
```javascript
const WebappWebpackPlugin = require('webapp-webpack-plugin')
...
plugins: [
new WebappWebpackPlugin({
logo: '/path/to/logo.png', // svg works too!
favicons: {
appName: 'my-app',
appDescription: 'My awesome App',
developerName: 'Me',
developerURL: null, // prevent retrieving from the nearest package.json
background: '#ddd',
theme_color: '#333',
icons: {
coast: false,
yandex: false
}
}
})
]
```
#### Handling Multiple HTML Files
```javascript
const WebappWebpackPlugin = require('webapp-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { basename } = require('path')
...
plugins: [
new HtmlWebpackPlugin({
template: 'a.html.tmpl',
filename: 'a.html',
}),
new HtmlWebpackPlugin({
template: 'b.html.tmpl',
filename: 'b.html',
}),
new WebappWebpackPlugin({
logo: 'logo.svg',
inject: htmlPlugin =>
basename(htmlPlugin.options.filename) === 'a.html',
}),
],
```
## Hooks
To allow other plugins to intercept and customise assets before they are emitted, the following hooks may be tapped
### webappWebpackPluginBeforeEmit
> AsyncSeriesWaterfallHook
Example implementation:
```js
new class {
apply(compiler) {
compiler.hooks.make.tapAsync("A", (compilation, callback) => {
compilation.hooks.webappWebpackPluginBeforeEmit.tapAsync("B", (result, callback) => {
// The result of favicons library can be modified here
// and it will be returned to WebApp Plugin to be emitted.
// Add your custom functions below
console.log(result);
// Return the custom result
return callback(null, result);
});
return callback();
})
}
}
```
## Rule
A Webpack loader rule is also provided to make the generated HTML tags available to your JS app.
```js
const plugin = new WebappWebpackPlugin({ logo: '/path/to/logo.png' });
...
plugins: [
plugin
]
module: {
rules: [
plugin.rule()
],
}
```
```js
// now inside Webpack bundle
// you can require logo path
// and get an array of strings with html tags
const favicons = require( '/path/to/logo.png' );
```
> **Note**: `logo` must be an absolute path for `rule` to work.
## Contribution
You're very welcome to contribute to this project by opening
[issues](https://github.com/brunocodutra/webapp-webpack-plugin/issues) and/or
[pull requests](https://github.com/brunocodutra/webapp-webpack-plugin/pulls).
Please keep in mind that every change and new feature should be covered by
tests.
## License
This project is licensed under [MIT](https://github.com/brunocodutra/webapp-webpack-plugin/blob/master/LICENSE).
[favicons]: https://github.com/haydenbleasel/favicons
---
_Source: https://npm.io/package/webapp-webpack-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
[](http://badge.fury.io/js/webapp-webpack-plugin)
[](https://coveralls.io/github/brunocodutra/webapp-webpack-plugin?branch=master)
[](https://travis-ci.org/brunocodutra/webapp-webpack-plugin)
[](https://ci.appveyor.com/project/brunocodutra/webapp-webpack-plugin/branch/master)
[](https://greenkeeper.io/)
[](https://david-dm.org/brunocodutra/webapp-webpack-plugin)
Leverages on [favicons] to automatically generate your progressive web app for you.
> Originally forked from [jantimon/favicons-webpack-plugin](https://github.com/jantimon/favicons-webpack-plugin)
>