1376a20c90
- Создана модульная архитектура webpack конфигурации в config/build/ - Настроены loader'ы: Babel, TypeScript, CSS/SCSS, File, SVGR - Добавлены плагины: HtmlWebpackPlugin, MiniCssExtractPlugin, ReactRefresh, BundleAnalyzer - Настроен dev-сервер с HMR и поддержкой SPA роутинга - Добавлена полная JSDoc документация на русском языке
44 lines
1.7 KiB
TypeScript
44 lines
1.7 KiB
TypeScript
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
|
||
}
|