feat(app): introduce react configurations [EE-1809] (#5953)

webpack/webpack.common.js

@@ -7,6 +7,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-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');
 
 const pkg = require('../package.json');
 const projectRoot = path.resolve(__dirname, '..');
@@ -37,7 +38,7 @@ module.exports = {
         ],
       },
       {
-        test: /\.js$/,
+        test: /\.(js|ts)(x)?$/,
         exclude: /node_modules/,
         use: ['babel-loader', 'auto-ngtemplate-loader'],
       },
@@ -61,7 +62,21 @@ module.exports = {
       },
       {
         test: /\.css$/,
-        use: [MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { importLoaders: 1 } }, 'postcss-loader'],
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 1,
+              modules: {
+                localIdentName: '[path][name]__[local]',
+                auto: true,
+                exportLocalsConvention: 'camelCaseOnly',
+              },
+            },
+          },
+          'postcss-loader',
+        ],
       },
     ],
   },
@@ -103,7 +118,6 @@ module.exports = {
     new MiniCssExtractPlugin({
       filename: '[name].[hash].css',
       chunkFilename: '[name].[id].css',
-      sourceMap: true,
     }),
     new CleanWebpackPlugin(['dist/public']),
     new IgnorePlugin(/^\.\/locale$/, /moment$/),
@@ -136,5 +150,11 @@ module.exports = {
       Portainer: path.resolve(projectRoot, 'app/portainer'),
       '@': path.resolve(projectRoot, 'app'),
     },
+    extensions: ['.js', '.ts', '.tsx'],
+    plugins: [
+      new TsconfigPathsPlugin({
+        extensions: ['.js', '.ts', '.tsx'],
+      }),
+    ],
   },
 };