Question

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

我还使用InjectManifest Workbox插件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}'] }) ]来渲染预缓存清单，然后将其注入服务工作文件。

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

manifest.hash.json

问题是我无法找到将渲染的date,bid,ask = np.loadtxt('EURUSDH1_1week1.csv', unpack=True, delimiter=',', converters={0:mdates.strpdate2num('%Y%m%d%H%M%S')})添加到由InjectManifest生成的预缓存清单中的方法。有没有办法让他们一起玩得很好或者不可能？

Answer 1

我遇到了一个名为manifest.<chunkhash>.js的公共块的问题，该块未包含在生成的预缓存清单中。

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

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

Answer 2

它已在Workbox v4.0.0中修复：https://github.com/GoogleChrome/workbox/pull/1679

Answer 3

webpack-pwa-manifest插件生成的文件不包含在webpack构建管道中（可能是一个错误），因此InjectManifest插件无法动态添加所有资产。

有一种解决方法，可以使用globDirectory和globPatterns选项预缓存其他资产：

new InjectManifest({
  swSrc: './dist/sw.js',
  globDirectory: '.',
  globPatterns: ['dist/manifest.*.json']
})

在此配置示例中，插件将所有包和您的其他清单文件作为外部文件。但是webpack会警告您：

您正在使用以下Workbox配置选项： [globDirectory，globPatterns]。在Workbox v3和更高版本中，这是通常不需要。

您应该仅将其用于资产，而不是由webpack执行。查看docs中的说明。

在您的特定配置中，问题是您错过了globDirectory: '.'选项，插件无法找到文件。

我希望它仍然有意义并为您提供帮助。

如何将生成的PWA清单包含到Workbox呈现的预缓存清单中

3 个答案: