feat: модульная конфигурация webpack с React 19 и TypeScript 5

- Создана модульная архитектура webpack конфигурации в config/build/
- Настроены loader'ы: Babel, TypeScript, CSS/SCSS, File, SVGR
- Добавлены плагины: HtmlWebpackPlugin, MiniCssExtractPlugin, ReactRefresh, BundleAnalyzer
- Настроен dev-сервер с HMR и поддержкой SPA роутинга
- Добавлена полная JSDoc документация на русском языке

config/build/loaders/buildBabelLoader.ts

@@ -0,0 +1,30 @@
+/**
+ * Конфигурация Babel loader для webpack
+ * 
+ * Обрабатывает файлы JavaScript, JSX и TSX с помощью Babel.
+ * В режиме разработки включает React Refresh для горячей перезагрузки компонентов.
+ * 
+ * @param {boolean} isDev - Флаг режима разработки
+ * @returns {Object} Конфигурация babel-loader
+ * 
+ * @example
+ * const babelLoader = buildBabelLoader(true)
+ * // Возвращает loader с React Refresh для разработки
+ */
+export function buildBabelLoader(isDev: boolean) {
+  const babelLoader = {
+    test: /\.(js|jsx|tsx)$/,
+    exclude: /node_modules/,
+    use: {
+      loader: 'babel-loader',
+      options: {
+        presets: ['@babel/preset-env'],
+        plugins: [isDev && require.resolve('react-refresh/babel')].filter(
+          Boolean
+        ),
+      },
+    },
+  }
+
+  return babelLoader
+}

config/build/loaders/buildCssLoader.ts

@@ -0,0 +1,43 @@
+import MiniCssExtractPlugin from 'mini-css-extract-plugin'
+
+/**
+ * Конфигурация CSS/SCSS loader для webpack
+ * 
+ * Обрабатывает файлы .css, .scss и .sass с поддержкой CSS модулей.
+ * В режиме разработки использует style-loader для инъекции стилей в DOM.
+ * В режиме production использует MiniCssExtractPlugin для извлечения CSS в отдельные файлы.
+ * 
+ * CSS модули автоматически включаются для файлов с паттерном *.module.*
+ * 
+ * @param {boolean} isDev - Флаг режима разработки
+ * @returns {Object} Конфигурация css-loader с поддержкой SCSS и CSS модулей
+ * 
+ * @example
+ * // Для файла Button.module.scss будут применены CSS модули
+ * // Для файла global.scss CSS модули не применяются
+ */
+export const buildCssLoader = (isDev: boolean) => {
+  const cssLoader = {
+    test: /\.s[ac]ss$/i,
+    use: [
+      // Создает <style> теги из JS строк (dev) или извлекает в файлы (prod)
+      isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
+      // Преобразует CSS в CommonJS модули
+      {
+        loader: 'css-loader',
+        options: {
+          modules: {
+            auto: /\.module\..*$/,
+            localIdentName: isDev
+              ? '[path][name]__[local]--[hash:base64:5]'
+              : '[hash:base64:8]',
+          },
+        },
+      },
+      // Компилирует Sass в CSS
+      'sass-loader',
+    ],
+  }
+
+  return cssLoader
+}

config/build/loaders/buildFileLoader.ts

@@ -0,0 +1,27 @@
+/**
+ * Конфигурация file-loader для webpack
+ * 
+ * Обрабатывает статические файлы: изображения и шрифты.
+ * Копирует файлы в директорию сборки и возвращает публичный URL.
+ * 
+ * Поддерживаемые форматы:
+ * - Изображения: .png, .jpg, .jpeg, .gif
+ * - Шрифты: .woff, .woff2
+ * 
+ * @returns {Object} Конфигурация file-loader
+ * 
+ * @example
+ * import logo from './logo.png'
+ * // logo будет содержать путь к файлу в сборке
+ */
+export function buildFileLoader() {
+  const fileLoader = {
+    test: /\.(png|jpe?g|gif|woff|woff2)$/i,
+    use: [
+      {
+        loader: 'file-loader',
+      },
+    ],
+  }
+  return fileLoader
+}

config/build/loaders/buildSvgrLoader.ts

@@ -0,0 +1,24 @@
+/**
+ * Конфигурация SVGR loader для webpack
+ * 
+ * Преобразует SVG файлы в React компоненты.
+ * Позволяет импортировать SVG как обычные React компоненты с возможностью
+ * управления их свойствами (цвет, размер и т.д.) через props.
+ * 
+ * @returns {Object} Конфигурация @svgr/webpack loader
+ * 
+ * @example
+ * import Logo from './logo.svg'
+ * 
+ * function App() {
+ *   return <Logo width={100} height={100} fill="red" />
+ * }
+ */
+export function buildSvgrLoader() {
+  const svgrLoader = {
+    test: /\.svg$/,
+    use: ['@svgr/webpack'],
+  }
+
+  return svgrLoader
+}

config/build/loaders/buildTypescriptLoader.ts

@@ -0,0 +1,23 @@
+/**
+ * Конфигурация TypeScript loader для webpack
+ * 
+ * Компилирует TypeScript файлы (.ts, .tsx) в JavaScript.
+ * Выполняет проверку типов во время сборки.
+ * 
+ * @returns {Object} Конфигурация ts-loader
+ * 
+ * @example
+ * // Обрабатывает файлы:
+ * // - Component.tsx
+ * // - utils.ts
+ * // - types.d.ts
+ */
+export function buildTypescriptLoader() {
+  const typescriptLoader = {
+    test: /\.tsx?$/,
+    use: 'ts-loader',
+    exclude: '/node-modules/',
+  }
+
+  return typescriptLoader
+}