如何在不重新加载 Webpack-Dev-Server 的情况下重新加载 Service-Worker（工作箱）？答案

【问题标题】：How to reload Service-Worker (workbox) without reloading Webpack-Dev-Server?如何在不重新加载 Webpack-Dev-Server 的情况下重新加载 Service-Worker（工作箱）？
【发布时间】：2020-03-03 17:59:39
【问题描述】：

我的问题是这是否可以强制 webpack-dev-server 更新 service-worker 文件而无需手动重新加载整个服务器？我正在使用带有 injectManifest 选项的 workbox-webpack-plugin。它看起来像这样：

 new InjectManifest({
  swSrc: './sw-base.js',
  swDest: 'sw.js',
}),

这是 sw-base.js

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/5.0.0/workbox-sw.js',
);

workbox.setConfig({ debug: false });

self.skipWaiting();

workbox.routing.registerRoute(
  new RegExp(/\.(png|jpg)/),
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: 'images',
  }),
);

workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);

当我更改 sw-base.js 文件（例如 cacheName）时，我必须重新加载整个 webpack-dev-server 以应用更改。

那么这是否可以让 dev-server 在 sw-base.js 更改时自动重新加载？

提前致谢：3

【问题讨论】：

你的意思是你必须停止脚本然后重新启动脚本？还是在浏览器中刷新页面？您总是需要刷新浏览器才能加载新的软件。
不，我的朋友，我的意思是我必须重新运行开发服务器（通过命令'webpack-dev-server'）。
你在用这样的插件吗？ npmjs.com/package/serviceworker-webpack-plugin
我正在使用 workbox-webpack-plugin。它在 webpack.config 的顶部声明： const { InjectManifest } = require('workbox-webpack-plugin');

标签： javascript webpack service-worker webpack-dev-server workbox

【解决方案1】：

我正在回答自己的问题，但它可能会帮助其他人，谁知道呢。所以很可能，使用 webpack-dev-server 是不可能的。

但是，您可以为使用 workbox 和 webpack 进行非常有效的构建。

步骤：

不要使用 webpack-dev-server，而是安装第三方服务器包，例如“http-server”。
在“dist/build”文件夹中的文件范围内运行新服务器。
运行你的 webpack:build 命令。旁注：不要使用 --watch 标志，它会导致 InjectManifest 插件出现一些问题。您必须在每次更新时使用命令手动重建您的应用。

为了加快开发速度，您可以在 ChromeDevTools/application 中启用“重新加载时更新”选项。它会在重新加载时自动取消注册并注册新的 service worker。

干杯

【讨论】：