client: use extracted CSS for production build

client/config/webpack.config.prod.js

@@ -5,6 +5,9 @@ const CopyPlugin = require('copy-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const ManifestPlugin = require('webpack-manifest-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 const getClientEnvironment = require('./env');
 const paths = require('../../shared/config/paths');
 
@@ -36,7 +39,11 @@ module.exports = {
         test: /\.s?css$/,
         use: [
           {
-            loader: 'style-loader',
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              // filename is static/css/x.css, so root path is ../../
+              publicPath: '../../',
+            },
           },
           {
             loader: 'css-loader',
@@ -194,7 +201,29 @@ module.exports = {
         },
       ],
     }),
+    new MiniCssExtractPlugin({
+      filename: 'static/css/[name].[hash].css',
+      chunkFilename: 'static/css/[id].[hash].css',
+    }),
   ],
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          output: {
+            comments: false,
+          },
+        },
+        extractComments: false,
+      }),
+      new OptimizeCssAssetsPlugin({
+        cssProcessorPluginOptions: {
+          preset: ['default', {discardComments: {removeAll: true}}],
+        },
+      }),
+    ],
+  },
   performance: {
     // TODO: Add code-splitting and re-enable this when the bundle is smaller
     hints: false,

package.json

@@ -122,9 +122,11 @@
     "html-webpack-plugin": "^4.4.1",
     "jsdoc": "^3.6.5",
     "minami": "^1.2.3",
+    "mini-css-extract-plugin": "^0.11.2",
     "node-sass": "^4.13.0",
     "nodemon": "^2.0.4",
     "object-assign": "4.1.1",
+    "optimize-css-assets-webpack-plugin": "^5.0.4",
     "pascal-case": "^3.1.1",
     "postcss": "^8.0.5",
     "postcss-loader": "^4.0.2",
@@ -149,6 +151,7 @@
     "sass-loader": "^10.0.2",
     "source-map-loader": "^1.1.0",
     "style-loader": "^1.2.1",
+    "terser-webpack-plugin": "^4.2.1",
     "ts-node-dev": "^1.0.0-pre.62",
     "typed-css-modules": "^0.6.4",
     "typed-emitter": "^1.3.0",