feat(frontend): upgrade frontend dependencies DTD-11 (#6244)

* upgrade webpack, eslint, storybook and other dependencies

webpack/webpack.common.js

@@ -4,7 +4,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const WebpackBuildNotifierPlugin = require('webpack-build-notifier');
 const CleanTerminalPlugin = require('clean-terminal-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const CleanWebpackPlugin = require('clean-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
 const ESLintPlugin = require('eslint-webpack-plugin');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
@@ -18,13 +18,14 @@ module.exports = {
     main: './app',
   },
   output: {
-    filename: '[name].[hash].js',
+    filename: '[name].[contenthash].js',
     path: path.resolve(projectRoot, 'dist/public'),
   },
   module: {
     rules: [
       {
         test: /\.js$/,
+        type: 'javascript/auto',
         enforce: 'pre',
         use: [
           {
@@ -59,7 +60,7 @@ module.exports = {
 
       {
         test: /.xml$/,
-        use: 'file-loader',
+        type: 'asset/resource',
       },
       {
         test: /\.css$/,
@@ -82,14 +83,18 @@ module.exports = {
     ],
   },
   devServer: {
-    contentBase: path.join(__dirname, '.tmp'),
+    static: {
+      directory: path.join(__dirname, 'public'),
+    },
     compress: true,
     port: 8999,
     proxy: {
       '/api': 'http://localhost:9000',
     },
     open: true,
-    writeToDisk: true,
+    devMiddleware: {
+      writeToDisk: true,
+    },
   },
   plugins: [
     new Dotenv(),
@@ -118,11 +123,11 @@ module.exports = {
       jsyaml: 'js-yaml',
     }),
     new MiniCssExtractPlugin({
-      filename: '[name].[hash].css',
+      filename: '[name].[contenthash].css',
       chunkFilename: '[name].[id].css',
     }),
-    new CleanWebpackPlugin(['dist/public']),
-    new IgnorePlugin(/^\.\/locale$/, /moment$/),
+    new CleanWebpackPlugin(),
+    new IgnorePlugin({ resourceRegExp: /^.\/locale$/, contextRegExp: /moment$/ }),
     // new BundleAnalyzerPlugin()
     new LodashModuleReplacementPlugin({
       shorthands: true,
@@ -131,7 +136,10 @@ module.exports = {
     }),
   ],
   optimization: {
+    moduleIds: 'deterministic',
+    runtimeChunk: 'single',
     splitChunks: {
+      chunks: 'all',
       cacheGroups: {
         vendor: {
           test: /node_modules/,

webpack/webpack.develop.js

@@ -1,19 +1,14 @@
-const webpackMerge = require('webpack-merge');
+const { merge } = require('webpack-merge');
 const commonConfig = require('./webpack.common.js');
 
-module.exports = webpackMerge(commonConfig, {
+module.exports = merge(commonConfig, {
   mode: 'development',
   devtool: 'eval-source-map',
   module: {
     rules: [
       {
         test: /\.(woff|woff2|eot|ttf|svg|ico|png|jpg|gif)$/,
-        use: [
-          {
-            loader: 'file-loader',
-            // options: { limit: 25000 }
-          },
-        ],
+        type: 'asset/resource',
       },
     ],
   },

webpack/webpack.production.js

@@ -1,29 +1,18 @@
-const webpackMerge = require('webpack-merge');
+const { merge } = require('webpack-merge');
 const commonConfig = require('./webpack.common.js');
 
-module.exports = webpackMerge(commonConfig, {
+module.exports = merge(commonConfig, {
   mode: 'production',
   devtool: 'source-map',
   module: {
     rules: [
       {
         test: /\.(woff|woff2|eot|ttf|ico)$/,
-        use: [
-          {
-            loader: 'url-loader',
-            options: { limit: 25000 },
-          },
-        ],
+        type: 'asset/inline',
       },
       {
         test: /\.(gif|png|jpe?g|svg)$/i,
-        use: [
-          'file-loader',
-          {
-            loader: 'image-webpack-loader',
-            options: {},
-          },
-        ],
+        type: 'asset/resource',
       },
     ],
   },

webpack/webpack.testing.js

@@ -1,6 +1,6 @@
-const webpackMerge = require('webpack-merge');
+const { merge } = require('webpack-merge');
 const productionConfig = require('./webpack.production');
 
-module.exports = webpackMerge(productionConfig, {
+module.exports = merge(productionConfig, {
   optimization: { nodeEnv: 'testing' },
 });