title: How do I compile a service worker to a separate location from other JS, using Webpack?
body: <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>