How do I compile a service worker to a separate location from other JS, using Webpack?
<p>I'm working on a TypeScript project, so I'd like to be able to write a service worker in TypeScript and then compile it down to ES5.</p>

<p>I've got that working with the following configuration options:</p>

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

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

<p>This creates a <code>dist/app.js</code> and <code>dist/sw.js</code> file. However, service workers come with a limitation, which is that they can only cache files that are in or below the directory of the service worker. I want to cache the root (<code>index.html</code>), so I can't have it in the <code>dist</code> directory.</p>

<p>Is there a best practice for solving this problem? I'm thinking of two possibilities:</p>

<ol>
<li>Compile the service worker to the project root directory. I don't like this option because then my project root will have a compiled file (<code>sw.js</code>) with a bunch of directories (e.g. <code>src</code> and <code>dist</code>) and config files (e.g. <code>package.json</code> and <code>tsconfig.json</code>).</li>
<li>Somehow move <code>index.html</code> to another directory and serve it from there. I'm not super opposed to this if it's possible.</li>
</ol>

<p>Are there other possibilities? If not, which of these two sounds like a better idea, and how would I go about configuring Webpack to solve this issue?</p>