webpack pwa manifest下载-WebPack webpack pwa manifest源代码下载

webpack pwa manifest

网站数据

v4.3.0

下载

webpack-pwa-manifest

寻找愿意提供帮助的人！更多信息

webpack-pwa-manifest是一个WebPack插件，可为您的渐进Web应用程序生成“清单”，并具有自动图标调整大小和指纹支持。

如果您在配置上使用inject ，请确保在plugins数组中的WebpackPwaManifest之前出现HtmlWebpackPlugin ！

特征

✔自动图标调整大小

✔图标指纹

✔表明指纹

✔在HTML上自动示意注射

✔热重载支持

✔ES6+准备就绪

安装

 npm install -- save - dev webpack - pwa - manifest

用法

在您的webpack.config.js中：

 // ES6+
import WebpackPwaManifest from 'webpack-pwa-manifest'

// ES5
var WebpackPwaManifest = require ( 'webpack-pwa-manifest' )

. . .

plugins : [
  new WebpackPwaManifest ( {
    name : 'My Progressive Web App' ,
    short_name : 'MyPWA' ,
    description : 'My awesome Progressive Web App!' ,
    background_color : '#ffffff' ,
    crossorigin : 'use-credentials' , //can be null, use-credentials or anonymous
    icons : [
      {
        src : path . resolve ( 'src/assets/icon.png' ) ,
        sizes : [ 96 , 128 , 192 , 256 , 384 , 512 ] // multiple sizes
      } ,
      {
        src : path . resolve ( 'src/assets/large-icon.png' ) ,
        size : '1024x1024' // you can also use the specifications pattern
      } ,
      {
        src : path . resolve ( 'src/assets/maskable-icon.png' ) ,
        size : '1024x1024' ,
        purpose : 'maskable'
      }
    ]
  } )
]

输出

manifest.<fingerprint>.json

{
  "name" : " My Progressive Web App " ,
  "orientation" : " portrait " ,
  "display" : " standalone " ,
  "start_url" : " . " ,
  "short_name" : " MyPWA " ,
  "description" : " My awesome Progressive Web App! " ,
  "background_color" : " #ffffff " ,
  "icons" : [
    {
      "src" : " icon_1024x1024.<fingerprint>.png " ,
      "sizes" : " 1024x1024 " ,
      "type" : " image/png " ,
      "purpose" : " maskable "
    },
    {
      "src" : " icon_1024x1024.<fingerprint>.png " ,
      "sizes" : " 1024x1024 " ,
      "type" : " image/png "
    },
    {
      "src" : " icon_512x512.<fingerprint>.png " ,
      "sizes" : " 512x512 " ,
      "type" : " image/png "
    },
    {
      "src" : " icon_384x384.<fingerprint>.png " ,
      "sizes" : " 384x384 " ,
      "type" : " image/png "
    },
    {
      "src" : " icon_256x256.<fingerprint>.png " ,
      "sizes" : " 256x256 " ,
      "type" : " image/png "
    },
    {
      "src" : " icon_192x192.<fingerprint>.png " ,
      "sizes" : " 192x192 " ,
      "type" : " image/png "
    },
    {
      "src" : " icon_128x128.<fingerprint>.png " ,
      "sizes" : " 128x128 " ,
      "type" : " image/png "
    },
    {
      "src" : " icon_96x96.<fingerprint>.png " ,
      "sizes" : " 96x96 " ,
      "type" : " image/png "
    }
  ]
}

API

webpackpwamanifest（[options]）

选项

类型： object

您可以遵循Web应用清单规范。

这里的区别在于，在定义图标时，您可以使用以上示例来指定一个具有多个尺寸的图标，使用整数数组。

您还可以使用filename属性更改输出的文件名。

预设options ：

 {
  filename : "manifest.json" ,
  name : "App" ,
  orientation : "portrait" ,
  display : "standalone" ,
  start_url : "." ,
  crossorigin : null ,
  inject : true ,
  fingerprints : true ,
  ios : false ,
  publicPath : null ,
  includeDirectory : true
}

默认情况下，HTML注射和指纹生成正在开始。 inject: false和fingerprints: false ，您可以将其关闭。

如果未定义inject: true和'theme-color'属性，它将尝试将theme_color用作默认值。否则，将不会注入任何theme-color元标记。

随附的includeDirectory: true ，我们将使用filename的目录导出清单文件。

随着orientation: 'omit' ，将从生成的清单文件中省略方向密钥。

inject: true和ios: true ，特定的Apple Meta标签将在可能的情况下将其注入HTML代码，按照第13期中的要求。您可以看到Apple的配置Web应用程序以获取更多信息。您还可以使用对象指定某些链接或元标记，而不是使用布尔值，例如：

  ...
  ios: {
    'apple-mobile-web-app-title' : 'AppTitle' ,
    'apple-mobile-web-app-status-bar-style' : 'black'
  }

如果未给出publicPath选项，则此插件会退出WebPack的公共路径定义。

定义图标对象时，您还可以使用称为destination的属性指定其输出目录。在图标对象中使用ios: true使其有资格参加apple-touch-icon Meta标签注入。在图标对象中使用ios: 'startup'使其符合apple-touch-startup-image Meta标签注入的条件。

  ...
  icons: [
    {
      src : path . resolve ( 'src/assets/icons/ios-icon.png' ) ,
      sizes : [ 120 , 152 , 167 , 180 , 1024 ] ,
      destination : path . join ( 'icons' , 'ios' ) ,
      ios : true
    } ,
    {
      src : path . resolve ( 'src/assets/icons/ios-icon.png' ) ,
      size : 1024 ,
      destination : path . join ( 'icons' , 'ios' ) ,
      ios : 'startup'
    } ,
    {
      src : path . resolve ( 'src/assets/icons/android-icon.png' ) ,
      sizes : [ 36 , 48 , 72 , 96 , 144 , 192 , 512 ] ,
      destination : path . join ( 'icons' , 'android' )
    }
  ]
}