Merge pull request #2698 from thornbill/live-reload

Fix live reload

src/serviceworker.js

@@ -44,6 +44,10 @@ self.addEventListener('notificationclick', function (event) {
     event.waitUntil(executeAction(action, data, serverId));
 }, false);
 
-// this is needed by the webpack Workbox plugin
+// Do not precache files in development so live reload works as expected
-/* eslint-disable-next-line no-restricted-globals,no-undef */
+/* eslint-disable-next-line no-undef -- NODE_ENV is replaced by webpack */
-precacheAndRoute(self.__WB_MANIFEST);
+if (process.env.NODE_ENV === 'production') {
+    // this is needed by the webpack Workbox plugin
+    /* eslint-disable-next-line no-restricted-globals,no-undef */
+    precacheAndRoute(self.__WB_MANIFEST);
+}

webpack.common.js

@@ -1,7 +1,6 @@
 const path = require('path');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
-const WorkboxPlugin = require('workbox-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 const Assets = [
@@ -72,10 +71,6 @@ module.exports = {
                     to: path.resolve(__dirname, './dist/libraries/wasm-gen')
                 };
             })
-        }),
-        new WorkboxPlugin.InjectManifest({
-            swSrc: path.resolve(__dirname, 'src/serviceworker.js'),
-            swDest: 'serviceworker.js'
         })
     ],
     output: {

webpack.dev.js

@@ -3,6 +3,8 @@ const common = require('./webpack.common');
 const merge = require('webpack-merge');
 
 module.exports = merge(common, {
+    // In order for live reload to work we must use "web" as the target not "browserlist"
+    target: 'web',
     mode: 'development',
     entry: './scripts/site.js',
     devtool: 'source-map',

webpack.prod.js

@@ -1,7 +1,15 @@
+const path = require('path');
 const common = require('./webpack.common');
 const merge = require('webpack-merge');
+const WorkboxPlugin = require('workbox-webpack-plugin');
 
 module.exports = merge(common, {
     mode: 'production',
-    entry: './scripts/site.js'
+    entry: './scripts/site.js',
+    plugins: [
+        new WorkboxPlugin.InjectManifest({
+            swSrc: path.resolve(__dirname, 'src/serviceworker.js'),
+            swDest: 'serviceworker.js'
+        })
+    ]
 });