build(webpack): fix hashing and css hmr (#14552)

ui/package.json

@@ -144,6 +144,7 @@
     "react-testing-library": "^5.4.4",
     "sass": "^1.22.7",
     "sass-loader": "^7.1.0",
+    "style-loader": "^0.23.1",
     "terser-webpack-plugin": "^1.3.0",
     "ts-jest": "^24.0.0",
     "ts-loader": "^5.3.3",

ui/webpack.common.ts

@@ -1,19 +1,14 @@
 const path = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const {CleanWebpackPlugin} = require('clean-webpack-plugin')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
 const webpack = require('webpack')
 const GIT_SHA = require('child_process')
   .execSync('git rev-parse HEAD')
   .toString()
 
-const devMode = process.env.NODE_ENV !== 'production'
-
 module.exports = {
   context: __dirname,
   output: {
-    filename: devMode ? '[name].bundle.js' : '[name].[hash].bundle.js',
     path: path.resolve(__dirname, 'build'),
   },
   entry: {
@@ -42,20 +37,6 @@ module.exports = {
           },
         ],
       },
-      {
-        test: /\.s?css$/i,
-        use: [
-          MiniCssExtractPlugin.loader,
-          'css-loader',
-          {
-            loader: 'sass-loader',
-            options: {
-              implementation: require('sass'),
-              hmr: process.env.NODE_ENV === 'development',
-            },
-          },
-        ],
-      },
       {
         test: /\.(png|svg|jpg|gif)$/,
         use: ['file-loader'],
@@ -74,14 +55,6 @@ module.exports = {
       favicon: './assets/images/favicon.ico',
       inject: 'body',
     }),
-    new MiniCssExtractPlugin({
-      filename: devMode ? '[name].css' : '[name].[hash].css',
-      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
-    }),
-    new ForkTsCheckerWebpackPlugin({
-      eslint: !devMode,
-      warningsFilter: /export * was not found in/,
-    }),
     new webpack.ProgressPlugin(),
     new webpack.EnvironmentPlugin({...process.env, GIT_SHA}),
   ],

ui/webpack.dev.ts

@@ -1,4 +1,5 @@
 export {}
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
 const merge = require('webpack-merge')
 const webpack = require('webpack')
 const common = require('./webpack.common.ts')
@@ -7,6 +8,9 @@ const path = require('path')
 module.exports = merge(common, {
   mode: 'development',
   devtool: 'cheap-inline-source-map',
+  output: {
+    filename: '[name].js',
+  },
   devServer: {
     hot: true,
     historyApiFallback: true,
@@ -16,10 +20,31 @@ module.exports = merge(common, {
       '/debug/flush': 'http://localhost:9999',
     },
   },
+  module: {
+    rules: [
+      {
+        test: /\.s?css$/i,
+        use: [
+          'style-loader',
+          'css-loader',
+          {
+            loader: 'sass-loader',
+            options: {
+              implementation: require('sass'),
+              hmr: true,
+            },
+          },
+        ],
+      },
+    ],
+  },
   plugins: [
     new webpack.DllReferencePlugin({
       context: path.join(__dirname, 'build'),
       manifest: require('./build/vendor-manifest.json'),
     }),
+    new ForkTsCheckerWebpackPlugin({
+      eslint: true,
+    }),
   ],
 })

ui/webpack.prod.ts

@@ -1,18 +1,55 @@
+export {}
 const merge = require('webpack-merge')
 const common = require('./webpack.common.ts')
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
 const TerserJSPlugin = require('terser-webpack-plugin')
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
 module.exports = merge(common, {
   mode: 'production',
   devtool: 'source-map',
+  output: {
+    filename: '[name].[hash].js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.s?css$/i,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          {
+            loader: 'sass-loader',
+            options: {
+              implementation: require('sass'),
+              hmr: true,
+            },
+          },
+        ],
+      },
+    ],
+  },
   optimization: {
     minimizer: [
-      new TerserJSPlugin({sourceMap: true}),
+      new TerserJSPlugin({
+        cache: true,
+        parallel: true,
+        sourceMap: true,
+      }),
       new OptimizeCSSAssetsPlugin({}),
     ],
     splitChunks: {
       chunks: 'all',
     },
   },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: '[name].[hash].css',
+      chunkFilename: '[id].[hash].css',
+    }),
+    new ForkTsCheckerWebpackPlugin({
+      eslint: false,
+    }),
+  ],
 })

ui/yarn.lock

@@ -11321,6 +11321,14 @@ strip-json-comments@^2.0.1, strip-json-comments@~2.0.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
   integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
 
+style-loader@^0.23.1:
+  version "0.23.1"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.23.1.tgz#cb9154606f3e771ab6c4ab637026a1049174d925"
+  integrity sha512-XK+uv9kWwhZMZ1y7mysB+zoihsEj4wneFWAS5qoiLwzW0WzSqMrrsIy+a3zkQJq0ipFtBpX5W3MqyRIBF/WFGg==
+  dependencies:
+    loader-utils "^1.1.0"
+    schema-utils "^1.0.0"
+
 stylehacks@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"