Upgrade webpack config and inline svg-s

frontend/webpack.config.js

@@ -1,28 +1,10 @@
-const path = require('path');
+const CleanWebpackPlugin = require('clean-webpack-plugin').CleanWebpackPlugin;
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
-const Sass = require('sass');
-const TerserJSPlugin = require('terser-webpack-plugin');
-const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+const ScssConfigWebpackPlugin = require('scss-config-webpack-plugin');
+const TsConfigWebpackPlugin = require('ts-config-webpack-plugin');
+const HtmlWebpackInlineSVGPlugin = require('html-webpack-inline-svg-plugin');
 
-const PATHS = {
-  entryPoint: path.resolve(__dirname, 'src/index.ts'),
-  bundles: path.resolve(__dirname, 'dist'),
-};
-
-module.exports = (env, argv) => ({
-  entry: {
-    index: PATHS.entryPoint,
-  },
-  target: 'web',
-  output: {
-    filename: '[name].js',
-    path: PATHS.bundles,
-  },
-  devtool: argv.mode === 'development' ? 'source-map' : false,
+module.exports = {
   devServer: {
     host: '0.0.0.0',
     disableHostCheck: true,
@@ -30,94 +12,30 @@ module.exports = (env, argv) => ({
       poll: true,
     },
   },
-  optimization: {
-    minimize: argv.mode !== 'development',
-    minimizer: [
-      new TerserJSPlugin({
-        sourceMap: false,
-        test: /\.js$/,
-        exclude: /node_modules/,
-        terserOptions: {
-          keep_classnames: true,
-        },
-      }),
-      new OptimizeCSSAssetsPlugin({}),
-    ],
-  },
   plugins: [
+    // Cleans the dist folder before the build starts
+    new CleanWebpackPlugin(),
+    // Generate a base html file and injects all generated css and js files
     new HtmlWebpackPlugin({
-      xhtml: true,
       template: './src/index.html',
-      minify: {
-        collapseWhitespace: true,
-        removeComments: true,
-        removeRedundantAttributes: true,
-        removeScriptTypeAttributes: true,
-        removeStyleLinkTypeAttributes: true,
-        useShortDoctype: true,
-      },
-      inlineSource: '.(js|css)$',
     }),
-    new HtmlWebpackInlineSourcePlugin(),
-    new MiniCssExtractPlugin({
-      filename: '[name].css',
-      chunkFilename: '[id].css',
-    }),
-    new CleanWebpackPlugin({
-      protectWebpackAssets: false,
-      cleanAfterEveryBuildPatterns: ['*', '!index.html', '!static*'],
+    new HtmlWebpackInlineSVGPlugin({
+      inlineAll: true,
+      svgoConfig: [
+        {
+          removeViewBox: false,
+        },
+      ],
     }),
+    // SCSS Configuration for .css .module.css and .scss .module.scss files
+    // see https://github.com/namics/webpack-config-plugins/tree/master/packages/scss-config-webpack-plugin/config
+    new ScssConfigWebpackPlugin(),
+    // Multi threading typescript loader configuration with caching for .ts and .tsx files
+    // see https://github.com/namics/webpack-config-plugins/tree/master/packages/ts-config-webpack-plugin/config
+    new TsConfigWebpackPlugin(),
   ],
   module: {
     rules: [
-      {
-        test: /\.ico$/,
-        use: {
-          loader: 'file-loader',
-          query: {
-            outputPath: '/',
-            name: '[name].[ext]',
-          },
-        },
-      },
-      {
-        test: /\.svg$/,
-        use: {
-          loader: 'file-loader',
-          query: {
-            outputPath: '/static',
-            name: '[name].[ext]',
-          },
-        },
-      },
-      {
-        test: /\.scss$/,
-        use: [
-          MiniCssExtractPlugin.loader,
-          'css-loader',
-          'postcss-loader',
-          {
-            loader: 'resolve-url-loader',
-            options: {
-              keepQuery: true,
-            },
-          },
-          {
-            loader: 'sass-loader',
-            options: {
-              sourceMap: true,
-              implementation: Sass,
-            },
-          },
-        ],
-      },
-      {
-        test: /\.ts$/,
-        use: {
-          loader: 'ts-loader',
-        },
-        exclude: /node_modules/,
-      },
       {
         test: /\.js$/,
         enforce: 'pre',
@@ -125,7 +43,4 @@ module.exports = (env, argv) => ({
       },
     ],
   },
-  resolve: {
-    extensions: ['.ts', '.js'],
-  },
-});
+};