@uvarovag/webpack-config-ts-react/dist/webpack.config.js

Shared Webpack configuration for React projects using TypeScript

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const html_webpack_plugin_1 = __importDefault(require("html-webpack-plugin"));
const node_path_1 = __importDefault(require("node:path"));
const webpack_1 = require("webpack");
const fork_ts_checker_webpack_plugin_1 = __importDefault(require("fork-ts-checker-webpack-plugin"));
exports.default = ({ NODE_ENV = 'development', PUBLIC_PATH = 'auto', BASE_URL = '/', PORT = 3000, }) => {
    const dirname = process.cwd();
    const src = node_path_1.default.resolve(dirname, 'src');
    const dist = node_path_1.default.resolve(dirname, 'dist');
    const isDev = NODE_ENV === 'development';
    return {
        // Режим сборки: 'development' или 'production', задаётся через NODE_ENV
        mode: NODE_ENV,
        // Тип source maps для отладки: 'eval-source-map' для разработки, 'nosources-source-map' для продакшена
        devtool: isDev ? 'eval-source-map' : 'nosources-source-map',
        // Входная точка приложения
        entry: node_path_1.default.resolve(src, 'index.tsx'),
        // Настройки выходного файла
        output: {
            // Папка для сборки
            path: dist,
            // Публичный путь для загрузки ресурсов
            publicPath: PUBLIC_PATH,
            // Имя выходного файла с добавлением хэша для кэширования
            filename: '[name].[contenthash:8].js',
            // Очистка директории перед сборкой
            clean: true,
        },
        // Настройки разрешения модулей
        resolve: {
            // Расширения файлов, которые можно импортировать без указания расширения
            extensions: ['.ts', '.tsx', '.js', '.jsx'],
            // Предпочитать абсолютные пути для модулей
            preferAbsolute: true,
            // Где искать модули: исходный код и node_modules
            modules: [src, 'node_modules'],
            // Главные файлы для модуля
            mainFiles: ['index'],
        },
        // Настройки загрузчиков для обработки различных типов файлов
        module: {
            rules: [
                {
                    // Обработка TypeScript и TSX файлов
                    test: /\.(ts|tsx)$/,
                    use: {
                        loader: 'ts-loader',
                        options: {
                            // Только транспиляция без проверки типов в разработке
                            transpileOnly: isDev,
                        },
                    },
                    exclude: /node_modules/, // Исключить node_modules
                },
                {
                    // Обработка SVG файлов через svgr
                    test: /\.svg$/,
                    use: '@svgr/webpack',
                },
                {
                    // Использовать asset/resource для копирования файлов
                    test: /\.(png|jpe?g|gif|svg)$/i,
                    type: 'asset/resource',
                    generator: {
                        filename: 'assets/images/[hash][ext][query]',
                    },
                },
                {
                    // Использовать asset/resource для копирования файлов
                    test: /\.(woff|woff2|eot|ttf|otf)$/i,
                    type: 'asset/resource',
                    generator: {
                        filename: 'assets/fonts/[hash][ext][query]',
                    },
                },
                {
                    // Обработка CSS файлов
                    test: /\.css$/,
                    use: ['style-loader', 'css-loader'],
                },
            ],
        },
        // Настройки плагинов
        plugins: [
            // Генерация HTML файла с подключением выходных файлов
            new html_webpack_plugin_1.default({
                template: node_path_1.default.resolve(dirname, 'public', 'index.html'),
            }),
            // Определение глобальных переменных окружения для использования в коде
            new webpack_1.DefinePlugin({
                IS_DEV: JSON.stringify(isDev),
                BASE_URL: JSON.stringify(BASE_URL),
            }),
            // Прогресс-бар во время сборки
            isDev && new webpack_1.ProgressPlugin(),
            // Поддержка Hot Module Replacement для обновления модулей без перезагрузки страницы
            isDev && new webpack_1.HotModuleReplacementPlugin(),
            // Проверка типов TypeScript в режиме разработки
            isDev &&
                new fork_ts_checker_webpack_plugin_1.default({
                    // Проверка типов асинхронно в режиме разработки
                    async: isDev,
                    typescript: {
                        diagnosticOptions: {
                            // Проверка семантики TypeScript
                            semantic: true,
                            // Проверка синтаксиса
                            syntactic: true,
                        },
                    },
                }),
        ].filter(Boolean),
        // Настройки DevServer для разработки
        devServer: {
            // Порт разработки
            port: PORT,
            // Для SPA: перенаправление всех запросов на index.html
            historyApiFallback: true,
            // Путь к статическим файлам
            static: [node_path_1.default.resolve(dirname, 'dist'), node_path_1.default.resolve(dirname, 'public')],
            // Открытие браузера при старте DevServer
            open: true,
            headers: {
                // Доступ с любого источника
                'Access-Control-Allow-Origin': '*',
            },
        },
    };
};