javascript - 如何使用 Webpack 将服务 worker 编译到与其他 JS 不同的位置？

Question

我正在开发一个 TypeScript 项目，所以我希望能够用 TypeScript 编写一个 service worker，然后将其编译为 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 文件。但是，service worker 有一个限制，那就是它们只能缓存 service worker 目录中或目录下的文件。我想缓 stub (index.html)，所以我不能将它放在 dist 目录中。

是否有解决此问题的最佳实践？我在想两种可能性:

1. 将service worker编译到项目根目录。我不喜欢这个选项，因为那样我的项目根目录将有一个编译文件 (sw.js) 和一堆目录(例如 src 和 dist) 和配置文件(例如 package.json 和 tsconfig.json)。
2. 以某种方式将 index.html 移动到另一个目录并从那里提供它。如果可能的话，我并不反对。

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

Answer 1

您有多种选择，一种是将 Service Worker 设置为静态内容，指向您需要的端点。
使用 express:

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

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

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

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

  next();
});

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