webpack - 如何将生成的 PWA list 包含到 Workbox 呈现的预缓存 list 中

Question

我有一个使用 webpack-pwa-manifest 的 Webpack 配置文件插件 ( https://github.com/arthurbergmz/webpack-pwa-manifest ) 来生成 PWA list 文件。 list 文件名为 manifest.hash.json ，其中“哈希”是在每次构建时动态生成的值。

我也在使用 InjectManifest Workbox 的插件( https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin ) 来呈现预缓存 list ，然后将其注入(inject)到服务 worker 文件中。

这是我的 Webpack 配置文件的“插件”部分:

      plugins: [
        new CleanWebpackPlugin([ path.join(destDir, '*.*') ], {
        allowExternal: true,
        exclude: [],
        verbose: true,
        dry: false
      }),
      new MiniCssExtractPlugin({
        filename: 'style.[hash].css'
      }),
      new VueLoaderPlugin(),
      new HtmlWebpackPlugin({
        template: path.join(projectRoot, 'src/index.html')
      }),
      new WebpackPwaManifest({
        name: 'Test PWA',
        short_name: 'Test PWA',
        fingerprints: true,
        inject: true,
        lang: 'en-US',
        start_url: 'https://localhost:8120/index.html',
        display: 'standalone',
        theme_color: '#777777',
        background_color: '#333333',
        icons: [
          {
            src: path.join(sourceDir, 'images/icon.png'),
            sizes: [36, 48, 72, 96, 144, 192, 512],
            destination: 'icons'
          }
        ]
      }),
      new InjectManifest({
        swSrc: path.join(projectRoot, 'src/sw.js'),
        swDest: 'sw.js',
        importWorkboxFrom: 'local',
        globPatterns: ['dist/*.{json,js,html}']
      })
    ]

问题是我找不到添加渲染 manifest.hash.json 的方法到 InjectManifest 生成的预缓存 list 中。有什么办法可以让他们一起玩得很好，还是不可能？

Answer 1

我对名为 manifest.<chunkhash>.js 的公共(public) block 有同样的问题未包含在生成的预缓存 list 中。

解决方案是添加 exclude InjectManifest 的选项webpack 配置文件中的插件，因为它的默认值是(根据 docs ):[/\.map$/, /^manifest.*\.js(?:on)?$/] .

plugins: [
  new InjectManifest({
    swSrc: path.join(projectRoot, 'src/sw.js'),
    swDest: 'sw.js',
    importWorkboxFrom: 'local',
    exclude: [] // <-- Add this
  })
]