Merge pull request #578 from ThibG/glitch-soc/merge-upstream

Merge upstream changes

5 files changed, 74 insertions, 32 deletions

diff --git a/config/webpack/development.js b/config/webpack/development.js
index 12670f5cd..d54d919ec 100644
--- a/config/webpack/development.js
+++ b/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: {
diff --git a/config/webpack/loaders/sass.js b/config/webpack/loaders/sass.js
index 96ad7abe8..920d5350f 100644
--- a/config/webpack/loaders/sass.js
+++ b/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'],
+      },
+    },
+  ],
 };
diff --git a/config/webpack/production.js b/config/webpack/production.js
index 037a76a59..58c7fa69a 100644
--- a/config/webpack/production.js
+++ b/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',
 
-  plugins: [
-    new webpack.optimize.UglifyJsPlugin({
-      sourceMap: true,
-      mangle: true,
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new UglifyJsPlugin({
+        sourceMap: true,
 
-      compress: {
-        warnings: false,
-      },
+        uglifyOptions: {
+          mangle: true,
 
-      output: {
-        comments: false,
-      },
-    }),
+          compress: {
+            warnings: false,
+          },
+
+          output: {
+            comments: false,
+          },
+        },
+      }),
+    ],
+  },
+
+  plugins: [
     new CompressionPlugin({
       asset: '[path].gz[query]',
       algorithm: compressionAlgorithm,
diff --git a/config/webpack/shared.js b/config/webpack/shared.js
index 35b9bbd1c..6b6629a37 100644
--- a/config/webpack/shared.js
+++ b/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,
     }),
   ],
 
diff --git a/config/webpack/test.js b/config/webpack/test.js
index 6b2b073bb..8b56eb92f 100644
--- a/config/webpack/test.js
+++ b/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',
+});