Javascript 如何使用Webpack将服务工作者编译到与其他JS不同的位置？

我正在从事一个TypeScript项目，所以我希望能够用TypeScript编写一个服务人员，然后将其编译到ES5

我可以使用以下配置选项：

// webpack.config.json
entry: {
  app: './src/index.tsx',
  sw: './src/service-worker/sw.ts',
},

output: {
  filename: '[name].js',
  path: __dirname + '/dist',
},

这将创建一个

dist/app.js

和

dist/sw.js

文件。但是，服务工作者有一个限制，即他们只能缓存服务工作者目录中或目录下的文件。我想缓存根（

index.html

），因此无法将其放在

dist

目录中

有解决这个问题的最佳实践吗？我在考虑两种可能性：

将服务工作者编译到项目根目录。我不喜欢这个选项，因为这样我的项目根目录将有一个编译文件（

sw.js

），其中包含一系列目录（例如

src

和

dist

）和配置文件（例如

package.json

和

tsconfig.json

）

以某种方式将

index.html

移动到另一个目录并从那里提供服务。如果可能的话，我并不十分反对

---

还有其他的可能性吗？如果不是，这两个选项中哪一个听起来更好，我如何配置Webpack来解决这个问题？

您有几个选项，一个是将服务工作者设置为静态内容，指向您需要的端点
使用express：

app.use('/sw.js', Express.static(join(__dirname, '../dist/sw.js'),staticOptions));

另一个选择是使用
如果您需要对请求进行更多控制，甚至可以创建一个快速中间件。

app.use((req, res, next) => {

  //if req.url is /dis/sw.js
  //rewrite the URL to /sw.js
  req.url = newUrl;

  next();
});

---

这些是一些选项，希望这有助于澄清。

我没有听说过这个限制，您可以引用它吗？您可以在结构上将服务工作者保留在您想要的位置，然后在您的服务器中，在根级别向工作者添加显式端点。我猜这是客户端强加的限制，如果您在

https://my.cool.domain/service-worker.js

，客户端实际上不会知道它被深埋在某个地方的目录中。