Merge branch 'webpack-sw-improvements' into 'develop'

Webpack SW improvements

See merge request soapbox-pub/soapbox-fe!635

.gitignore

@@ -9,9 +9,16 @@
 yarn-error.log*
 
 /static/packs
+/static/packs-test
 /static/emoji
 /static/index.html
+/static/index.html.gz
+/static/manifest.json
+/static/manifest.json.gz
+/static/report.html
+/static/sw.js
 /static/instance/**
 !/static/instance/**.example
 !/static/instance/**.example.*
 !/static/instance/**.example/**
+/static-test

app/soapbox/main.js

@@ -1,8 +1,10 @@
 'use strict';
 
 import './wdyr';
-import * as registerPushNotifications from './actions/push_notifications';
-import { default as Soapbox, store } from './containers/soapbox';
+// FIXME: Push notifications are temporarily removed
+// import * as registerPushNotifications from './actions/push_notifications';
+// import { default as Soapbox, store } from './containers/soapbox';
+import { default as Soapbox } from './containers/soapbox';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import ready from './ready';
@@ -12,15 +14,6 @@ const perf = require('./performance');
 function main() {
   perf.start('main()');
 
-  // if (window.history && history.replaceState) {
-  //   const { pathname, search, hash } = window.location;
-  //   const path = pathname + search + hash;
-  //   if (!(/^\/[$/]/).test(path)) {
-  //     console.log('redirecting you to hell');
-  //     history.replaceState(null, document.title, `${path}`);
-  //   }
-  // }
-
   ready(() => {
     const mountNode = document.getElementById('soapbox');
 
@@ -28,7 +21,8 @@ function main() {
     if (process.env.NODE_ENV === 'production') {
       // avoid offline in dev mode because it's harder to debug
       require('offline-plugin/runtime').install();
-      store.dispatch(registerPushNotifications.register());
+      // FIXME: Push notifications are temporarily removed
+      // store.dispatch(registerPushNotifications.register());
     }
     perf.stop('main()');
   });

webpack/configuration.js

@@ -4,43 +4,22 @@ const { env } = require('process');
 const settings = {
   source_path: 'app',
   public_root_path: 'static',
-  public_output_path: getPublicOutputPath(),
+  test_root_path: 'static-test',
   cache_path: 'tmp/cache/webpacker',
   resolved_paths: [],
   static_assets_extensions: [ '.jpg', '.jpeg', '.png', '.tiff', '.ico', '.svg', '.gif', '.eot', '.otf', '.ttf', '.woff', '.woff2' ],
   extensions: [ '.mjs', '.js', '.sass', '.scss', '.css', '.module.sass', '.module.scss', '.module.css', '.png', '.svg', '.gif', '.jpeg', '.jpg' ],
 };
 
-function removeOuterSlashes(string) {
-  return string.replace(/^\/*/, '').replace(/\/*$/, '');
-}
-
-function getPublicOutputPath() {
-  if (env.NODE_ENV === 'test') {
-    return 'packs-test';
-  }
-
-  return 'packs';
-}
-
-function formatPublicPath(host = '', path = '') {
-  let formattedHost = removeOuterSlashes(host);
-  if (formattedHost && !/^http/i.test(formattedHost)) {
-    formattedHost = `//${formattedHost}`;
-  }
-  const formattedPath = removeOuterSlashes(path);
-  return `${formattedHost}/${formattedPath}/`;
-}
+const outputDir = env.NODE_ENV === 'test' ? settings.test_root_path : settings.public_root_path;
 
 const output = {
-  path: join(__dirname, '..', 'static', settings.public_output_path),
-  publicPath: formatPublicPath(env.CDN_HOST, settings.public_output_path),
+  path: join(__dirname, '..', outputDir),
 };
 
 module.exports = {
   settings,
   env: {
-    CDN_HOST: env.CDN_HOST,
     NODE_ENV: env.NODE_ENV,
   },
   output,

webpack/development.js

@@ -1,10 +1,8 @@
 // Note: You must restart bin/webpack-dev-server for changes to take effect
 console.log('Running in development mode'); // eslint-disable-line no-console
 
-const { resolve } = require('path');
 const { merge } = require('webpack-merge');
 const sharedConfig = require('./shared');
-const { settings, output } = require('./configuration');
 
 const watchOptions = {};
 
@@ -72,11 +70,9 @@ module.exports = merge(sharedConfig, {
     port: 3036,
     https: false,
     hot: false,
-    contentBase: resolve(__dirname, '..', settings.public_root_path),
     inline: true,
     useLocalIp: false,
     public: 'localhost:3036',
-    publicPath: output.publicPath,
     historyApiFallback: {
       disableDotRule: true,
     },

webpack/production.js

@@ -6,7 +6,7 @@ const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const OfflinePlugin = require('offline-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const CompressionPlugin = require('compression-webpack-plugin');
-const { output } = require('./configuration');
+
 const sharedConfig = require('./shared');
 
 module.exports = merge(sharedConfig, {
@@ -44,7 +44,6 @@ module.exports = merge(sharedConfig, {
       logLevel: 'silent', // do not bother Webpacker, who runs with --json and parses stdout
     }),
     new OfflinePlugin({
-      publicPath: output.publicPath, // sw.js must be served from the root to avoid scope issues
       caches: {
         main: [':rest:'],
         additional: [':externals:'],
@@ -64,6 +63,15 @@ module.exports = merge(sharedConfig, {
       externals: [
         '/emoji/1f602.svg', // used for emoji picker dropdown
         '/emoji/sheet_13.png', // used in emoji-mart
+
+        // Default emoji reacts
+        '/emoji/1f44d.svg', // Thumbs up
+        '/emoji/2764.svg',  // Heart
+        '/emoji/1f606.svg', // Laughing
+        '/emoji/1f62e.svg', // Surprised
+        '/emoji/1f622.svg', // Crying
+        '/emoji/1f629.svg', // Weary
+        '/emoji/1f621.svg', // Angry (Spinster)
       ],
       excludes: [
         '**/*.gz',
@@ -77,10 +85,8 @@ module.exports = merge(sharedConfig, {
         '**/*.woff',
       ],
       // ServiceWorker: {
-      //   entry: `imports-loader?ATTACHMENT_HOST=>${encodeURIComponent(JSON.stringify(attachmentHost))}!${encodeURI(path.join(__dirname, '../app/soapbox/service_worker/entry.js'))}`,
+      //   entry: join(__dirname, '../app/soapbox/service_worker/entry.js'),
       //   cacheName: 'soapbox',
-      //   output: '../assets/sw.js',
-      //   publicPath: '/sw.js',
       //   minify: true,
       // },
     }),

webpack/rules/file.js

@@ -9,9 +9,9 @@ module.exports = {
       options: {
         name(file) {
           if (file.includes(settings.source_path)) {
-            return 'media/[path][name]-[hash].[ext]';
+            return 'packs/media/[path][name]-[hash].[ext]';
           }
-          return 'media/[folder]/[name]-[hash:8].[ext]';
+          return 'packs/media/[folder]/[name]-[hash:8].[ext]';
         },
         context: join(settings.source_path),
       },

webpack/shared.js

@@ -18,11 +18,11 @@ module.exports = {
   ),
 
   output: {
-    filename: 'js/[name]-[chunkhash].js',
-    chunkFilename: 'js/[name]-[chunkhash].chunk.js',
-    hotUpdateChunkFilename: 'js/[id]-[hash].hot-update.js',
+    filename: 'packs/js/[name]-[chunkhash].js',
+    chunkFilename: 'packs/js/[name]-[chunkhash].chunk.js',
+    hotUpdateChunkFilename: 'packs/js/[id]-[hash].hot-update.js',
     path: output.path,
-    publicPath: output.publicPath,
+    publicPath: '/',
   },
 
   optimization: {
@@ -59,8 +59,8 @@ module.exports = {
       },
     ),
     new MiniCssExtractPlugin({
-      filename: 'css/[name]-[contenthash:8].css',
-      chunkFilename: 'css/[name]-[contenthash:8].chunk.css',
+      filename: 'packs/css/[name]-[contenthash:8].css',
+      chunkFilename: 'packs/css/[name]-[contenthash:8].chunk.css',
     }),
     new AssetsManifestPlugin({
       integrity: false,
@@ -90,16 +90,14 @@ module.exports = {
         useShortDoctype: true,
       },
     }),
-    new HtmlWebpackHarddiskPlugin({
-      outputPath: join(__dirname, '..', 'static'),
-    }),
+    new HtmlWebpackHarddiskPlugin(),
     new CopyPlugin({
       patterns: [{
         from: join(__dirname, '../node_modules/twemoji/assets/svg'),
-        to: join(__dirname, '../static/emoji'),
+        to: join(output.path, 'emoji'),
       }, {
         from: join(__dirname, '../node_modules/emoji-datasource/img/twitter/sheets/32.png'),
-        to: join(__dirname, '../static/emoji/sheet_13.png'),
+        to: join(output.path, 'emoji/sheet_13.png'),
       }],
       options: {
         concurrency: 100,