15. Миграция с Webpack

Webpack — мощный инструмент с огромной экосистемой, но его конфигурация может быть сложной. Vite предлагает более простой API и значительно лучшую производительность в dev-режиме.

Ключевые различия архитектуры

Webpack:                          Vite:
├── Единый граф модулей           ├── Native ESM в браузере
├── Loader'ы (css-loader и т.д.)  ├── Встроенная обработка CSS
├── Plugin API (Tapable)          ├── Plugin API (Rollup + расширения)
├── CommonJS + ESM                ├── ESM first
└── Собирает всё перед запуском   └── On-demand трансформации

Эквиваленты конфигурации

Entry Point

webpack.config.js

module.exports = {
  entry: './src/index.tsx',
  // ...
}

// vite.config.ts
// Entry указывается в index.html:
// <script type="module" src="/src/index.tsx"></script>
// Дополнительный конфиг не нужен!

Aliases (resolve.alias)

webpack.config.js

resolve: {
  alias: {
    '@': path.resolve(__dirname, 'src'),
    'components': path.resolve(__dirname, 'src/components'),
  },
}

// vite.config.ts — идентичный синтаксис!
resolve: {
  alias: {
    '@': path.resolve(__dirname, 'src'),
    'components': path.resolve(__dirname, 'src/components'),
  },
}

CSS обработка

webpack.config.js

module: {
  rules: [
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader', 'postcss-loader'],
    },
    {
      test: /\.module\.css$/,
      use: ['style-loader', { loader: 'css-loader', options: { modules: true } }],
    },
    {
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
    },
  ],
}

// vite.config.ts
// Ничего не нужно! CSS, CSS Modules, SCSS
// поддерживаются нативно.
// Для SCSS только: npm i -D sass

Обработка файлов

// webpack.config.js (Webpack 4)
module: {
  rules: [
    { test: /\.(png|jpg|gif|svg)$/, use: 'file-loader' },
    { test: /\.(woff|woff2|eot|ttf|otf)$/, use: 'url-loader' },
    { test: /\.txt$/, use: 'raw-loader' },
  ],
}

// Webpack 5
module: {
  rules: [
    { test: /\.(png|jpg)$/, type: 'asset/resource' },
    { test: /\.txt$/, type: 'asset/source' },  // как ?raw
    { test: /\.svg$/, type: 'asset/inline' },   // как base64
  ],
}

// vite.config.ts — ничего не нужно!
// Vite обрабатывает все ресурсы нативно.
// PNG/JPG → хэшированный URL
// .txt?raw → строка содержимого

TypeScript

webpack.config.js

{ test: /\.tsx?$/, use: 'ts-loader' }
// или
{ test: /\.tsx?$/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-typescript'] } } }

// vite.config.ts — ничего!
// Vite транспилирует TypeScript через esbuild нативно.
// Только type-check: tsc --noEmit (в npm run build)

DefinePlugin (глобальные константы)

webpack.config.js

new webpack.DefinePlugin({
  'process.env.API_URL': JSON.stringify(process.env.API_URL),
  __VERSION__: JSON.stringify('1.0.0'),
})

// vite.config.ts
define: {
  __VERSION__: JSON.stringify('1.0.0'),
  // process.env.* переменные доступны автоматически
  // Используй VITE_ переменные через import.meta.env
}

Dev Server Proxy

webpack.config.js

devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true,
    },
  },
}

// vite.config.ts — идентичный синтаксис!
server: {
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true,
    },
  },
}

Code Splitting / Dynamic Import

webpack.config.js

optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendor: {
        test: /node_modules/,
        name: 'vendors',
        chunks: 'all',
      },
    },
  },
}

// vite.config.ts
build: {
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: ['react', 'react-dom'],
      },
    },
  },
}

Ниже — интерактивный переводчик конфигов: вводи Webpack конфиг и получай эквивалент для Vite: