时间戳

首页 > 解决方案 > 如何使用 Webpack 5 加载服务工作者？

javascript - 如何使用 Webpack 5 加载服务工作者？

问题描述

我正在使用 Webpack 5，我希望有一个 Service Worker，它将拦截获取请求并在本地返回响应而不会访问网络。我还希望能够在 Service Worker 中导入 npm 模块。为此，我曾经使用一个名为serviceworker-webpack-plugin的库，但它不再维护（并且在我使用它时会引发错误）。Webpack 文档建议使用 Workbox，但据我所知，这似乎只是为了在 Service Worker 中缓存资产。有人能告诉我 2020 年使用 Webpack 5 创建 Service Worker 的正确方法是什么吗？

标签： javascriptreactjswebpackservice-worker

解决方案

将 service worker 添加到您的 webpack.config.js 条目字段

entry: {
    'app': "./src/index.js",
    'service-worker': "./src/service-worker.ts",
},
output: {
    filename: "[name].js",
},

这将发出dist/app.jsand dist/service-worker.js，并且可以在两者中导入东西。

serviceworker-webpack-plugin还为 serviceworker 提供了一种查看它应该缓存的所有捆绑文件列表的方法，但是该功能不能直接使用，需要制作 webpack 插件才能获取。

推荐阅读