Webpack: switch build directory to 'static' instead of 'static/packs', fix sw.js

.gitignore

@@ -9,8 +9,14 @@
 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.*

webpack/configuration.js

@@ -11,10 +11,6 @@ const settings = {
   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';
@@ -23,25 +19,14 @@ function getPublicOutputPath() {
   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}/`;
+function packsPath(path) {
+  return join(settings.public_output_path, path);
 }
 
-const output = {
-  path: join(__dirname, '..', 'static', settings.public_output_path),
-  publicPath: formatPublicPath(env.CDN_HOST, settings.public_output_path),
-};
-
 module.exports = {
   settings,
   env: {
-    CDN_HOST: env.CDN_HOST,
     NODE_ENV: env.NODE_ENV,
   },
-  output,
+  packsPath,
 };

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

@@ -1,5 +1,5 @@
 const { join } = require('path');
-const { settings } = require('../configuration');
+const { settings, packsPath } = require('../configuration');
 
 module.exports = {
   test: new RegExp(`(${settings.static_assets_extensions.join('|')})$`, 'i'),
@@ -9,9 +9,9 @@ module.exports = {
       options: {
         name(file) {
           if (file.includes(settings.source_path)) {
-            return 'media/[path][name]-[hash].[ext]';
+            return packsPath('media/[path][name]-[hash].[ext]');
           }
-          return 'media/[folder]/[name]-[hash:8].[ext]';
+          return packsPath('media/[folder]/[name]-[hash:8].[ext]');
         },
         context: join(settings.source_path),
       },

webpack/shared.js

@@ -8,7 +8,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
 const { UnusedFilesWebpackPlugin } = require('unused-files-webpack-plugin');
-const { env, settings, output } = require('./configuration');
+const { env, settings, packsPath } = require('./configuration');
 const rules = require('./rules');
 
 module.exports = {
@@ -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',
-    path: output.path,
-    publicPath: output.publicPath,
+    filename: packsPath('js/[name]-[chunkhash].js'),
+    chunkFilename: packsPath('js/[name]-[chunkhash].chunk.js'),
+    hotUpdateChunkFilename: packsPath('js/[id]-[hash].hot-update.js'),
+    path: join(__dirname, '..', 'static'),
+    publicPath: '/',
   },
 
   optimization: {
@@ -59,8 +59,8 @@ module.exports = {
       },
     ),
     new MiniCssExtractPlugin({
-      filename: 'css/[name]-[contenthash:8].css',
-      chunkFilename: 'css/[name]-[contenthash:8].chunk.css',
+      filename: packsPath('css/[name]-[contenthash:8].css'),
+      chunkFilename: packsPath('css/[name]-[contenthash:8].chunk.css'),
     }),
     new AssetsManifestPlugin({
       integrity: false,
@@ -90,9 +90,7 @@ module.exports = {
         useShortDoctype: true,
       },
     }),
-    new HtmlWebpackHarddiskPlugin({
-      outputPath: join(__dirname, '..', 'static'),
-    }),
+    new HtmlWebpackHarddiskPlugin(),
     new CopyPlugin({
       patterns: [{
         from: join(__dirname, '../node_modules/twemoji/assets/svg'),