Merge branch 'master' into glitch-soc/merge-upstream

Conflicts:
	Dockerfile
	app/javascript/packs/common.js
	config/webpack/loaders/sass.js
	config/webpack/shared.js
	db/schema.rb
	package.json
	yarn.lock

A lot of the conflicts come from updating webpack.

Even though upstream deleted app/javascript/packs/common.js, I kept
glitch-soc's version as it unifies JS/CSS packs behavior across flavours.

Ported glitch changes to webpack 4.x

config/webpack/development.js

@@ -16,6 +16,8 @@ if (process.env.VAGRANT) {
 }
 
 module.exports = merge(sharedConfig, {
+  mode: 'development',
+
   devtool: 'cheap-module-eval-source-map',
 
   stats: {

config/webpack/loaders/sass.js

@@ -1,15 +1,27 @@
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const { env } = require('../configuration.js');
 
 module.exports = {
-  test: /\.(scss|sass|css)$/i,
-  use: ExtractTextPlugin.extract({
-    fallback: 'style-loader',
-    use: [
-      { loader: 'css-loader', options: { minimize: env.NODE_ENV === 'production' } },
-      { loader: 'postcss-loader', options: { sourceMap: true } },
-      'resolve-url-loader',
-      { loader: 'sass-loader', options: { includePaths: ['app/javascript'] } },
-    ],
-  }),
+  test: /\.s?css$/i,
+  use: [
+    MiniCssExtractPlugin.loader,
+    {
+      loader: 'css-loader',
+      options: {
+        minimize: env.NODE_ENV === 'production',
+      },
+    },
+    {
+      loader: 'postcss-loader',
+      options: {
+        sourceMap: true,
+      },
+    },
+    {
+      loader: 'sass-loader',
+      options: {
+        includePaths: ['app/javascript'],
+      },
+    },
+  ],
 };

config/webpack/production.js

@@ -1,7 +1,7 @@
 // Note: You must restart bin/webpack-dev-server for changes to take effect
 
-const webpack = require('webpack');
 const merge = require('webpack-merge');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 const CompressionPlugin = require('compression-webpack-plugin');
 const sharedConfig = require('./shared.js');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
@@ -36,6 +36,8 @@ if (process.env.S3_ENABLED === 'true') {
 }
 
 module.exports = merge(sharedConfig, {
+  mode: 'production',
+
   output: {
     filename: '[name]-[chunkhash].js',
     chunkFilename: '[name]-[chunkhash].js',
@@ -44,19 +46,28 @@ module.exports = merge(sharedConfig, {
   devtool: 'source-map', // separate sourcemap file, suitable for production
   stats: 'normal',
 
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new UglifyJsPlugin({
+        sourceMap: true,
+
+        uglifyOptions: {
+          mangle: true,
+
+          compress: {
+            warnings: false,
+          },
+
+          output: {
+            comments: false,
+          },
+        },
+      }),
+    ],
+  },
+
   plugins: [
-    new webpack.optimize.UglifyJsPlugin({
-      sourceMap: true,
-      mangle: true,
-
-      compress: {
-        warnings: false,
-      },
-
-      output: {
-        comments: false,
-      },
-    }),
     new CompressionPlugin({
       asset: '[path].gz[query]',
       algorithm: compressionAlgorithm,

config/webpack/shared.js

@@ -1,9 +1,9 @@
 // Note: You must restart bin/webpack-dev-server for changes to take effect
 
 const webpack = require('webpack');
-const { join, resolve } = require('path');
+const { basename, dirname, join, relative, resolve } = require('path');
 const { sync } = require('glob');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const ManifestPlugin = require('webpack-manifest-plugin');
 const { env, settings, core, flavours, output, loadersDir } = require('./configuration.js');
 const localePacks = require('./generateLocalePacks');
@@ -59,6 +59,25 @@ module.exports = {
     publicPath: output.publicPath,
   },
 
+  optimization: {
+    runtimeChunk: {
+      name: 'locales',
+    },
+    splitChunks: {
+      cacheGroups: {
+        default: false,
+        vendors: false,
+        locales: {
+          name: 'locales',
+          chunks: 'all',
+          minChunks: Infinity,
+          minSize: 0,
+        },
+      },
+    },
+    occurrenceOrder: true,
+  },
+
   module: {
     rules: sync(join(loadersDir, '*.js')).map(loader => require(loader)),
   },
@@ -72,17 +91,13 @@ module.exports = {
         resource.request = resource.request.replace(/^history/, 'history/es');
       }
     ),
-    new ExtractTextPlugin({
+    new MiniCssExtractPlugin({
       filename: env.NODE_ENV === 'production' ? '[name]-[contenthash].css' : '[name].css',
-      allChunks: true,
     }),
     new ManifestPlugin({
       publicPath: output.publicPath,
       writeToFileEmit: true,
-    }),
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'locales',
-      minChunks: Infinity, // It doesn't make sense to use common chunks with multiple frontend support.
+      filter: file => !file.isAsset || file.isModuleAsset,
     }),
   ],
 

config/webpack/test.js

@@ -3,4 +3,6 @@
 const merge = require('webpack-merge');
 const sharedConfig = require('./shared.js');
 
-module.exports = merge(sharedConfig, {});
+module.exports = merge(sharedConfig, {
+  mode: 'development',
+});