时间戳

首页 > 解决方案 > 如何使用工作箱和 webpack 生成工作服务人员？

webpack - 如何使用工作箱和 webpack 生成工作服务人员？

问题描述

我正在尝试构建我的第一个 PWA，但我正在努力让一切正常运行。我一直在将“GenerateSW”添加到我的 webpack.prod.js 中，如下所示：

const { GenerateSW } = require('workbox-webpack-plugin');
...
    plugins: [
...
new GenerateSW()
]
...

构建过程会生成一个包含许多条目的 service-worker.js，但据我所知，它不包含 vendor.bundle.js

它应该包含所有生成的 js 文件还是缺少 vendor.bundle.js 是否正确？启动应用程序时，我可以在“缓存存储/workbox-precache-v2”中找到一些预缓存的文件，但那里也缺少 vendor.bundle.js。它虽然包含 main.bundle.js，但是当切换到离线并重新加载页面时，我看到 main.bundle.js 也没有被加载： main.bundle.js?06c1420d003c1b00a02a （失败）是因为 webpack 添加了一个 URL加载包时的参数？

PWA 清单也无法加载，可能是因为 service worker 无法启动？

标签： webpackworkbox

解决方案

我不得不像这样增加要预缓存的对象的文件大小：

new GenerateSW({
    maximumFileSizeToCacheInBytes : 5000000
})

推荐阅读