How to use webpack-pwa-manifest - 4 common examples

new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: `${css}/[name]${contenthash}.css`,
      // filename: '[name].css',
      chunkFilename: `${css}/[id]${contenthash}.css`
    })
  ];

  if (templateEnabled) {
    plugins.push(new PackingTemplatePlugin(appConfig));
  }

  if (injectManifest) {
    plugins.push(new WebpackPwaManifest({
      ...requireDefault(path.resolve(context, 'config/webpack.manifest')),
      ...{ filename: `[name]${hash}[ext]` }
    }));
  }

  // 该插件用的还是旧插件机制
  if (visualizerEnabled) {
    plugins.push(new WebpackVisualizerPlugin());
  }

  const optimization = { minimize: minimizeEnabled };
  // const optimization = {};

  if (minimizeEnabled) {
    optimization.minimizer = [
      new TerserWebpackPlugin(minimizeOptions)

chunkFilename: '[name].js',
    filename: '[name].js',
    // prd环境静态文件输出地址
    path: context,
    // dev环境下数据流访问地址
    publicPath: '/'
  };

  const resolve = {
    modules: [src, 'node_modules']
  };

  const plugins = [];

  if (injectManifest) {
    plugins.push(new WebpackPwaManifest({
      ...requireDefault(path.resolve(context, 'config/webpack.manifest')),
      ...{ filename: '[name][ext]' }
    }));
  }

  if (hotEnabled) {
    entry = pushClientJS(entry);
    plugins.push(new webpack.HotModuleReplacementPlugin());
  }

  if (program.open) {
    plugins.push(new OpenBrowserPlugin({
      url: `http://${localhost}:${port.dev}`
    }));
  }

manifest.icons.map(icon => {
        const inCwdPath = path.resolve(process.cwd(), icon.src)
        if (fs.existsSync(inCwdPath)) {
            icon.src = inCwdPath
        }
        return icon
    })

    plugins = plugins.concat(new GenerateSW())

    if (fs.existsSync(swSrc)) {
        plugins.push(new InjectManifest({ swSrc }))
    }

    return plugins.concat([
        new WebpackPwaManifestPlugin(manifest),
        new WebpackManifestPlugin({
            fileName: './manifest.webpack.json'
        }),
        new webpack.DefinePlugin({
            mhy: JSON.stringify(mhyConfig)
        })
    ])
}

const ignorePublicFolder: RegExp[] = fs.readdirSync(path.resolve(__dirname, './public'))
      .map((pathDir: string) => {
        if (fs.lstatSync('./public/' + pathDir).isDirectory()) {
          return new RegExp('^' + pathDir);
        }

        return new RegExp('^' + pathDir.replace(/\./g, '\\.') + '$');
      });

    webpackConfig.plugins.push(
      /**
       * Progressive Web App Manifest Generator for Webpack,
       * with auto icon resizing and fingerprinting support.
       * @see https://github.com/arthurbergmz/webpack-pwa-manifest
       */
      new WebpackPwaManifest({
        ...{
          background_color: '#fff',
          description: `Portfolio by ${modules.github.profile.name}`,
          filename: 'static/manifest.[hash].json',
          icons: [
            {
              destination: 'static/icons',
              sizes: [96, 128, 192, 256, 384, 512],
              src: path.resolve('demo/icon.png'),
            },
          ],
          name: `${modules.github.profile.name}`,
          short_name: config.modules.github.username,
          start_url: variables.siteUrl,
          theme_color: '#fff',
        },