title: Workbox service worker + manifest.json setup webpack 4
body: <p>I’m trying to create a webpack builder with workbox, as i can see Vue CLI 3 is using.
  In my package.json file, i’ve made a “build” to build and compile the files and a “dev” to run it.</p>
  
  <pre><code>"build": "webpack --mode development",
  "dev": "nodemon --inspect --watch webpack.config.js main.js"
  </code></pre>
  
  <p>I use <code>InjectManifest</code> from <code>workbox-webpack-plugin</code> to handle the build in my <code>webpack.config.js</code> file. I've tryed different options to see what they did.</p>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre><code>const path = require('path')
  const webpack = require('webpack')
  const HTMLWebpackPlugin = require('html-webpack-plugin')
  const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin')
  const {GenerateSW, InjectManifest} = require('workbox-webpack-plugin')
  
  
  module.exports = {
      mode: 'production',
      entry: {
          app: [
              '@babel/polyfill',
              './src/main.js'
          ]
      },
      output: {
          path: path.resolve(__dirname, 'dist/'),
          filename: '[name]-[hash].js',
          publicPath: '/'
      },
      devServer: {
          inline: false,
          contentBase: "./dist",
          overlay: true,
          hot: true,
          stats: {
              colors: true
          }
      },
      module: {
          rules: [
              {
                  test: /\.html$/,
                  use: {
                      loader: 'html-loader'
                  }
              },
              {
                  test: /\.js?$/,
                  exclude: /node_modules/,
                  loader: 'babel-loader',
                  query: {
                      presets: ['@babel/preset-env']
                  }
              },
              {
                  test: /\.css$/,
                  loader: [
                      'style-loader',
                      'css-loader'
                  ]
              },
              {
                  test: /\.scss$/,
                  use: [
                      {
                          loader: "style-loader"
                      },
                      {
                          loader: "css-loader", options: {
                              sourceMap: true
                          }
                      },
                      {
                          loader: "sass-loader", options: {
                              sourceMap: true
                          }
                      }
                  ]
              }
          ]
      },
      plugins: [
          new webpack.HotModuleReplacementPlugin(),
          new HTMLWebpackPlugin({
              template: './public/index.html'
          }),
          // new GenerateSW({
          //     include: [/\.html$/, /\.js$/, /\.css$/],
          //     exclude: '/node_modules'
          // }),
          new InjectManifest({
              swSrc: './src/js/registerServiceWorker.js',
              swDest: '/serviceworker.js',
              exclude: '/node_modules'
            })
          // service worker caching
          // new SWPrecacheWebpackPlugin(
          //     {
          //         cacheId: 'webpack-project',
          //         filename: 'service-worker.js',
          //         staticFileGlobs: [
          //             'dist/**/*.{js,css}',
          //             '/'
          //         ],
          //         minify: true,
          //         stripPrefix: 'dist/',
          //         dontCacheBustUrlsMatching: /\.\w{6}\./
          //     }
          // )
      ]
  }
  </code></pre>
  
  <p>When i build the project, i creates the following files:</p>
  
  <pre><code>app-e8dd91....js
  index.html
  precache-manifest.d92js8....js
  serviceworker.js
  </code></pre>
  
  <p>index.html file only adds the app-e8d91....js file as a script leaving the precached manifest file and service worker not being used, which results in that there's no service worker to my localhost.</p>
  
  <p>I have a registerServiceWorker.js file which is being referenced in the injectManifest plugin.</p>
  
  <p><strong>registerServiceWorker.js</strong></p>
  
  <pre><code> import { register } from "register-service-worker";
  const path = require('path')
  
  register(path.resolve(__dirname, 'service-worker.js'), {
      ready() {
          console.log(
          "App is being served from cache by a service worker."
          );
      },
      cached() {
          console.log("Content has been cached for offline use.");
      },
      updated() {
          console.log("New content is available; please refresh.");
      },
      offline() {
          console.log(
          "No internet connection found. App is running in offline mode."
          );
      },
      error(error) {
          console.error("Error during service worker registration:", error);
      }
  });
  </code></pre>
  
  <p>How do i make my build create and add the service worker + manifest.json file, so it works on localhost and also works offline?</p>
  
  <p><strong>File structure:</strong></p>
  
  <pre><code>webpack.config.js
  server.js (handle server + webpackHotMiddleware + express)
  dist (builded folder)
  src (folder)
       main.js
       js (folder)
           registerServiceWorker.js
  public (folder)
      index.html
      manifest.json
      favicon.ico
  </code></pre>