romanlex / app-manifest-webpack-plugin Goto Github PK

const webpackTemplate = require('html-webpack-template')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const AppManifestWebpackPlugin = require('app-manifest-webpack-plugin')


...
  const html = new HtmlWebpackPlugin({
    inject: false,
    title: globals.title,
    template: webpackTemplate,
    mobile: true,
    appMountId: globals.appMountId,
    meta: getMetas(contentSecurityPolicy),
    links: getLinks(LINKS),
    lang: 'en',
    filename: 'index.html',
    // favicon: path.join(appDirectory, srcDirectory, 'assets', 'favicons', 'favicon.ico'),
    chunks: chunkNames,
    scripts: getScripts(SCRIPTS),
    window: globalVars
  })

const appManifest = new AppManifestWebpackPlugin({
    logo: path.resolve(srcDirectory, 'assets', logoFileName),
    emitStats: true,
    inject: true,
    statsFilename: 'iconstats.json',
    persistentCache: true,
    // Prefix for file names (html will be container icons with this prefix)
    prefix: globals.publicPath,
    // Output path for icons (icons will be saved to output.path(webpack config) + this key)
    output: '/icons-[hash:8]/',
    config: {
      appName: globals.title, // Your application's name. `string`
      appDescription: globals.description, // Your application's description. `string`
      developerName: 'Mobile Solutions LINKS Foundation', // Your (or your developer's) name. `string`
      developerURL: 'https://linksfoundation.com/en/about/research-areas/', // Your (or your developer's) URL. `string`
      background: backgroundColor, // Background colour for flattened icons. `string`
      theme_color: chromeThemeColor, // Theme color for browser chrome. `string`
      display: 'standalone', // Android display: "browser" or "standalone". `string`
      orientation: 'portrait-primary', // Android orientation: "portrait" or "landscape". `string`
      start_url: `${globals.publicPath}index.html`, // Android start application's URL. `string`
      version: '1.0', // Your application's version number. `number`
      logging: true, // Print logs to console? `boolean`
      icons: {
        // Platform Options:
        // - offset - offset in percentage
        // - shadow - drop shadow for Android icons, available online only
        // - background:
        //   * false - use default
        //   * true - force use default, e.g. set background for Android icons
        //   * color - set background for the specified icons
        //
        android: true, // Create Android homescreen icon. `boolean` or `{ offset, background, shadow }`
        appleIcon: true, // Create Apple touch icons. `boolean` or `{ offset, background }`
        appleStartup: true, // Create Apple startup images. `boolean` or `{ offset, background }`
        coast: false, // Create Opera Coast icon with offset 25%. `boolean` or `{ offset, background }`
        favicons: true, // Create regular favicons. `boolean`
        firefox: true, // Create Firefox OS icons. `boolean` or `{ offset, background }`
        windows: true, // Create Windows 8 tile icons. `boolean` or `{ background }`
        yandex: false // Create Yandex browser icon. `boolean` or `{ background }`
      }
    }
  })

const plugins = [html, appManifest ...]

const webpackConfig = {
	plugins: [
	    new ScriptExtHtmlWebpackPlugin({
	        inline: /manifest/
	    }),
	    new AppManifestWebpackPlugin({
	        logo: 'my-logo.png'
	    })
	]
}