Upgrade to webpack 5

webpack.common.js

@@ -1,5 +1,7 @@
 const webpack = require('webpack');
 const path = require('path');
+const autoprefixer = require('autoprefixer');
+const cssnano = require('cssnano');
 
 module.exports = {
 	context: path.join(__dirname, 'src'),
@@ -20,39 +22,66 @@ module.exports = {
 			},
 			{
 				test: /\.css$/,
-				use: ['raw-loader'],
+				use: [{
+					loader: 'raw-loader',
+					options: {
+						esModule: false,
+					},
+				},],
 			},
 			{
 				test: /\.html$/,
-				use: ['raw-loader'],
+				use: [{
+					loader: 'raw-loader',
+					options: {
+						esModule: false,
+					},
+				},],
 			},
 			{
 				test: /\.pug$/,
 				use: [
-					'raw-loader',
+					{
+						loader: 'raw-loader',
+						options: {
+							esModule: false,
+						},
+					},
 					{
 						loader: 'pug-html-loader',
-						query: { doctype: 'html', plugins: require('pug-plugin-ng') },
+						options: { doctype: 'html', plugins: require('pug-plugin-ng') },
 					},
 				],
 			},
 			{
 				test: /\.scss$/,
 				use: [
-					'raw-loader',
+					{
+						loader: 'raw-loader',
+						options: {
+							esModule: false,
+						},
+					},
 					{
 						loader: 'postcss-loader',
 						options: {
-							ident: 'postcss',
-							plugins: loader => [
-								require('autoprefixer')('last 2 versions'),
-								require('cssnano')({ discardComments: { removeAll: true } }),
-							],
+							postcssOptions: {
+								ident: 'postcss',
+								plugins: [
+									autoprefixer('last 2 versions'),
+									cssnano({ discardComments: { removeAll: true } }),
+								],
+
+							}
 						},
 					},
 					{
 						loader: 'sass-loader',
-						options: { includePaths: ['src/styles'] },
+						options: {
+							sassOptions: {
+								includePaths: ['src/styles'],
+							},
+						},
 					},
 				],
 			},
@@ -60,13 +89,13 @@ module.exports = {
 				// Mark files inside `@angular/core` as using SystemJS style dynamic imports.
 				// Removing this will cause deprecation warnings to appear.
 				test: /[\/\\]@angular[\/\\]core[\/\\].+\.js$/,
-				parser: { system: true }, // enable SystemJS
+				parser: { system: false }, // disable SystemJS
 			},
 		],
 	},
 	plugins: [
 		new webpack.ContextReplacementPlugin(
-			/\@angular(\\|\/)core(\\|\/)fesm5/,
+			/\@angular(\\|\/)core(\\|\/)/,
 			path.resolve(__dirname, 'src', 'ts'),
 			{}
 		),