chore: replace file-loader with asset-modules

webpack-contrib/css-loader#1354 (comment)

package.json

@@ -59,14 +59,14 @@
     "concurrently": "7.1.0",
     "conventional-changelog-cli": "2.2.2",
     "css-loader": "6.7.1",
+    "css-minimizer-webpack-plugin": "4.0.0",
     "dayjs": "1.11.2",
     "eslint": "8.14.0",
     "eslint-config-xo": "0.40.0",
     "eslint-config-xo-react": "0.27.0",
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-react": "7.29.4",
     "eslint-plugin-react-hooks": "4.5.0",
-    "file-loader": "6.2.0",
     "filesize": "9.0.0",
     "history": "5.3.0",
     "html-webpack-plugin": "5.5.0",

webpack.config.js

@@ -1,6 +1,7 @@
 const path = require('path');
 const config = require('config');
 const CompressionWebpackPlugin = require('compression-webpack-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
@@ -33,6 +34,20 @@ module.exports = () => {
 				: `${ASSETS_PATH}/`,
 			filename: IS_DEVELOPMENT ? '[name].js' : '[name].[hash:8].js',
 		},
+		optimization: {
+			minimize: !IS_DEVELOPMENT,
+			minimizer: [
+				'...',
+				new CssMinimizerPlugin({
+					minimizerOptions: {
+						preset: [
+							'default',
+							{discardComments: {removeAll: true}},
+						],
+					},
+				}),
+			],
+		},
 		module: {
 			rules: [
 				{
@@ -48,13 +63,6 @@ module.exports = () => {
 						},
 					],
 				},
-				{
-					test: /\.css$/,
-					use: [
-						{loader: MiniCssExtractPlugin.loader},
-						{loader: 'css-loader'},
-					],
-				},
 				{
 					test: /\.scss$/,
 					use: [
@@ -65,16 +73,10 @@ module.exports = () => {
 				},
 				{
 					test: /\.(jpg|png|gif|eot|svg|woff|woff2|ttf)$/,
-					use: [
-						{
-							loader: 'file-loader',
-							options: {
-								esModule: false,
-								name: 'resources/[name].[hash:8].[ext]',
-								publicPath: `//${WEBPACK_DEV_SERVER.HOST}:${WEBPACK_DEV_SERVER.PORT}/`,
-							},
-						},
-					],
+					type: 'asset/resource',
+					generator: {
+						filename: 'resources/[name].[hash:8][ext]',
+					},
 				},
 			],
 		},