title: How to register service worker using webpack?
body: <p>I'm implementing a ReactJS web application using webpack and I want to start implementing a service worker to handle the network calls, in order to cache files. However, I find it hard to register the service worker javascript file. (I should add that I'm a beginner when it comes to both React and webpack.)</p>
  
  <p>If I get it right, webpack merges every javascript file into one <code>bundle.js</code> file, which makes it hard to call <code>navigator.serviceWorker.register('./sw.js')...</code>. I have tried different approaches, such as <a href="https://www.npmjs.com/package/serviceworker-webpack-plugin" rel="noreferrer">serviceworker-webpack-plugin</a>, but without luck. If I follow the steps provided on the readme page, I get an error message saying <code>Uncaught Error: serviceworker-webpack-plugin: It seems that your are importing "serviceworker-webpack-plugin/lib/runtime" without using the plugin. Makes sure that your webpack configuration is correct.</code>.</p>
  
  <p>Here's my <code>webpack.config.js</code> file:</p>
  
  <pre><code>var webpack = require('webpack');
  var path = require('path');
  import ServiceWorkerWebpackPlugin from 'serviceworker-webpack-plugin';
  
  module.exports = {
    devtool: 'inline-source-map',
    entry: [
      'webpack-dev-server/client?http://127.0.0.1:8080/',
      'webpack/hot/only-dev-server',
      './src/index.js'
    ],
    output: {
      path: path.join(__dirname, 'public'),
      filename: 'bundle.js'
    },
    resolve: {
      modulesDirectories: ['node_modules', 'src'],
      extensions: ['', '.js']
    },
    module: {
      loaders: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: ['babel-loader'],
          query: {
            presets: ['es2015','react']
          }
        }
      ]
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoErrorsPlugin(),
      new ServiceWorkerWebpackPlugin({
        entry: path.join(__dirname, 'src/sw.js'),
        excludes: [
          '**/.*',
          '**/*.map',
          '*.html',
        ],
        filename: 'sw.js'
      })
    ]
  }
  </code></pre>
  
  <p>Note: I used the <code>create-react-app</code> command to get going. Also, I have no issues with the service worker itself, I have a working implementation for another web app. It's just registering it I'm struggling with.</p>
  
  <p>Any help is appreciated!</p>