Какой конфиг для сборки используешь на работе?

Мой текущий стек инструментов сборки

На моей текущей позиции мы используем современный и гибкий стек инструментов сборки, который балансирует между производительностью, developer experience и специфическими требованиями проекта. Основные инструменты:

Веб-пак (Webpack) как основной бандлер

Webpack 5 остается нашим основным бандлером для сложных корпоративных приложений. Конфигурация разделена на три основные части:

// webpack.common.js
module.exports = {
  entry: {
    main: './src/index.tsx',
    vendor: ['react', 'react-dom']
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader', 'ts-loader']
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader']
      }
    ]
  }
};

// webpack.dev.js
module.exports = merge(common, {
  mode: 'development',
  devtool: 'cheap-module-source-map',
  devServer: {
    hot: true,
    port: 3000,
    historyApiFallback: true
  }
});

// webpack.prod.js
module.exports = merge(common, {
  mode: 'production',
  devtool: 'source-map',
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors'
        }
      }
    }
  }
});

TypeScript и Babel для транспиляции

Мы используем комбинацию TypeScript для проверки типов и Babel для транспиляции, что дает нам лучшее из обоих миров:

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "jsx": "react-jsx",
    "strict": true,
    "moduleResolution": "node",
    "baseUrl": "./src",
    "paths": {
      "@components/*": ["components/*"],
      "@utils/*": ["utils/*"]
    }
  }
}

// .babelrc
{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

PostCSS и Tailwind для стилей

Для обработки CSS мы выбрали PostCSS с несколькими плагинами:

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {},
    'postcss-preset-env': {
      stage: 3,
      features: {
        'nesting-rules': false
      }
    }
  }
};

Ключевые особенности нашей конфигурации

1. Модульная архитектура

• Конфигурация разделена на environment-specific файлы
• Используем webpack-merge для комбинирования конфигов
• Кастомные плагины для специфических нужд проекта

2. Оптимизация производительности

• Tree shaking для удаления неиспользуемого кода
• Code splitting для ленивой загрузки компонентов
• Caching через contenthash в именах файлов
• Module Federation для микросервисной архитектуры

3. Developer Experience

• Hot Module Replacement (HMR) в разработке
• Source maps для отладки
• ESLint и Prettier интеграция в процесс сборки
• Пользовательские алиасы для импортов

4. Анализ бандла

Мы используем несколько инструментов для анализа размера бандла:

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      reportFilename: 'bundle-report.html'
    })
  ]
};

CI/CD интеграция

Наша конфигурация сборки тесно интегрирована с процессом CI/CD:

# .github/workflows/build.yml
name: Build and Test
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
      - run: npm ci
      - run: npm run type-check
      - run: npm run lint
      - run: npm run build:prod
      - run: npm run test:coverage

Почему именно такой стек?

1. Баланс между скоростью и функциональностью - Webpack дает нам максимальную гибкость
2. Поддержка legacy и modern кода - можем постепенно мигрировать
3. Экосистема плагинов - огромное сообщество и готовые решения
4. Интеграция с другими инструментами - отлично работает с нашим мониторингом и аналитикой

Мы регулярно пересматриваем наш стек и экспериментируем с новыми инструментами (Vite, esbuild), но пока Webpack остается лучшим выбором для наших масштабов и требований к кастомизации.