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' )
    }
  ]
}