webpack konseptlari: legacy loyihani o'qish

Qisqacha: webpack — 2012-yildan beri eng ko'p ishlatilgan bundler; ko'p kompaniya loyihalari hali unda. Uning config'i to'rt tushunchadan iborat: entry (qayerdan boshlash), output (qayerga yozish), loader (JS bo'lmagan faylni modulga aylantirish: babel-loader, css-loader) va plagin (butun build bilan ishlash: HtmlWebpackPlugin). Vite'da bularning ko'pi sozlamasiz: kirish — index.html, TS va CSS — tayyor. Create React App (webpack ustida) 2025-yilda to'xtatilgan — bunday loyihalar Vite'ga ko'chiriladi.

Bu darsda

• webpack.config.js ni boshidan oxirigacha o'qib, har bo'lim nima qilishini ayta olasiz.
• Loader va plagin farqini tushuntirasiz.
• webpack va Vite tushunchalarini bir-biriga moslaysiz.
• Create React App loyihasini taniysiz va uni Vite'ga ko'chirish qadamlarini bilasiz.

Oldin bilishingiz kerak: Bundler nima: bog'liqlik grafi, chunk va asset, Vite II: vite.config, Vite plaginlari, Transpilyatsiya: Babel, SWC, esbuild va Oxc.

1. Nega bu kerak?

Jasur akaning tanishi — «Bahor»ga o'xshash yetkazib berish xizmati egasi. Uning saytini 2020-yilda boshqa dasturchi yozgan, endi u ketgan. Sardorga so'rov keldi: "Bir tugma qo'shib bera olasizmi?". Sardor repo'ni ochdi. Ildizda vite.config.ts yo'q, o'rniga — webpack.config.js, package.json da esa "start": "react-scripts start".

Bu odatiy holat. Ishdagi birinchi vazifangiz yangi loyiha emas, eski (legacy — meros qolgan, hali ishlayotgan) loyihada bo'lishi ehtimoli katta. Vite 2020-yilda chiqdi, webpack esa 2012-yildan beri bor. Bu yillarda yozilgan millionlab loyihalar webpack'da.

Yaxshi xabar: Vite'ni bilsangiz, webpack'ning 80 % ini allaqachon bilasiz. Tushunchalar bir xil — graf, chunk, hash, plagin. Faqat nomlar va "nima sozlamasiz ishlaydi" boshqacha. Bu dars — lug'at: webpack tilidan Vite tiliga.

Biz webpack'ni yozishni emas, o'qishni o'rganamiz. Yangi loyihani webpack'da boshlash 2026-yilda kamdan-kam asosli.

2. Bir loyiha — ikki bundler

Taqqoslash halol bo'lishi uchun Sardorning bahor-menyu loyihasini (TypeScript, CSS, index.html) webpack bilan ham yig'dik. O'rnatish (2026-10 holatiga versiyalar):

npm i -D -E webpack@5.111.1 webpack-cli@7.2.3 \
  webpack-dev-server@6.0.0 html-webpack-plugin@5.6.8 \
  css-loader@7.1.5 mini-css-extract-plugin@2.10.2 \
  babel-loader@10.1.1 @babel/core@8.0.7 @babel/preset-typescript@8.0.7

To'qqiz paket — Vite'da esa bitta (vite). Natija: node_modules ichida 273 ta papka, 79 MB. Vite loyihasida — 15 ta papka, 58 MB (TypeScript 6 bilan birga).

2.1 webpack.config.js — to'liq

// webpack.config.js — «Bahor» menyusi webpack 5 bilan
import webpack from "webpack";
import HtmlWebpackPlugin from "html-webpack-plugin";
import MiniCssExtractPlugin from "mini-css-extract-plugin";

export default (env, argv) => ({
  // 1. Kirish: qaysi fayldan boshlab graf quriladi
  entry: "./src/main.ts",
  // 2. Chiqish: natija qayerga va qanday nom bilan
  output: {
    filename: "assets/[name]-[contenthash:8].js",
    clean: true, // dist/ ni har build oldidan tozalash
  },
  resolve: {
    // import "./menyu.ts" ham, "./menyu" ham ishlasin
    extensions: [".ts", ".js"],
  },
  // 3. Loader'lar: JS bo'lmagan fayllarni modulga aylantirish
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: { presets: ["@babel/preset-typescript"] },
        },
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  // 4. Plaginlar: butun build bilan ishlash
  plugins: [
    new HtmlWebpackPlugin({ template: "./public/index.html" }),
    new MiniCssExtractPlugin({
      filename: "assets/[name]-[contenthash:8].css",
    }),
    new webpack.DefinePlugin({
      "process.env.BAHOR_API": JSON.stringify(
        "https://ilmhamroh.uz/api/mashq",
      ),
    }),
  ],
  // 5. Dev server: npx webpack serve
  devServer: {
    port: 5782,
    proxy: [{ context: ["/api"], target: "https://ilmhamroh.uz" }],
  },
  devtool: argv.mode === "development" ? "eval-source-map" : false,
});

Qo'rqmang — 55 qator, lekin besh bo'lim. Avval qisqa jadval, keyin birma-bir ochamiz:

3. To'rt asosiy tushuncha

flowchart LR
  E["entry<br/>src/main.ts"] --> L["loader'lar<br/>.ts → JS, .css → modul"]
  L --> G["bog'liqlik grafi"]
  G --> P["plaginlar<br/>HTML, CSS fayl, define"]
  P --> O["output<br/>dist/assets/…"]

Chapdan o'ngga: webpack kirish faylidan boshlaydi, har importni loader'dan o'tkazadi, grafni quradi, plaginlar butun natija ustida ishlaydi va hammasi output ga yoziladi.

3.1 entry va output

Entry (kirish nuqtasi) — webpack grafni qaysi JavaScript faylidan boshlaydi. Vite'da kirish — index.html (Bundler nima), webpack'da esa JS fayl; HTML — keyinroq plagin bilan yasaladi. Bu — ikki vosita orasidagi eng katta farq.

Output (chiqish) — natija qayerga va qanday nom bilan. path berilmasa — dist/ (Vite bilan bir xil sukut). filename dagi [name] — chunk nomi (main), [contenthash:8] — tarkibdan 8 belgili hash (Code splitting va hash). clean: true — Vite'da bu sukut bo'yicha (emptyOutDir).

3.2 Loader — bitta faylni o'giradi

webpack o'zi faqat JavaScript va JSON'ni tushunadi. Qolgan har fayl turi uchun — loader: faylni oladi va JavaScript moduliga aylantiradi. module.rules — "qaysi faylga qaysi loader" ro'yxati:

• test: /\.ts$/ — qaysi fayllar (RegExp). exclude: /node_modules/ — paketlarga tegmaslik (tezlik uchun).
• use — qaysi loader va uning sozlamalari. babel-loader — faylni Babel'dan o'tkazadi, @babel/preset-typescript — turlarni olib tashlaydi. Babel turlarni tekshirmaydi (Transpilyatsiya) — Vite'dagi Oxc kabi.
• CSS uchun ikki loader: use: [A, B] — o'ngdan chapga bajariladi. Avval css-loader (CSS'dagi @import va url() ni tushunadi), keyin MiniCssExtractPlugin.loader (natijani alohida .css faylga chiqaradi). Dev'da ko'pincha style-loader — CSS'ni <style> tegi qilib qo'shadi.

Vite'dagi o'xshashi — plaginning transform hook'i (Vite plaginlari): faylni olib, o'zgartirib qaytarish. Faqat Vite'da TS, CSS, JSON, rasm uchun "loader" kerak emas — hammasi ichida.

Eski config'larda file-loader, url-loader, raw-loader ni ko'rasiz: rasm va matn fayllari uchun. webpack 5 da ularning o'rnini asset modules egalladi — type: "asset/resource" (fayl), "asset/inline" (data:), "asset/source" (matn). Bu — Vite'dagi ?url, ?inline, ?raw (Vite IV).

3.3 Plagin — butun build bilan ishlaydi

Loader bitta fayl bilan ishlaydi, plagin — butun build bilan: hamma chunk tayyor bo'lgach yangi fayl qo'shadi, mavjudini o'zgartiradi. Config'da plagin — new bilan yaratilgan klass nusxasi:

DefinePlugin bizda process.env.BAHOR_API ni manzil satri bilan almashtirdi. Build ichida: "API:","https://ilmhamroh.uz/api/mashq"). define darsidagi qoida bu yerda ham: JSON.stringify.

3.4 devServer va devtool

devServer — webpack-dev-server paketi sozlamalari: port, proxy, HTTPS. Vite'dagi server bo'limi bilan bir xil g'oya (Dev server proxy). devtool — source map turi; "eval-source-map" — dev uchun tez, false — production'da xaritasiz (Source map'lar).

Config — funksiya: (env, argv) => ({...}). argv.mode — --mode production yoki development. Vite'dagi ({ command, mode }) => ... bilan bir xil g'oya.

Tekshirib ko'ring: Config'da use: ["css-loader", MiniCssExtractPlugin.loader] deb yozilgan (tartib teskari). Nima bo'ladi?

4. Ishga tushirish: farqni ko'ramiz

4.1 Build

npx webpack --mode production

Chiqish uzun, lekin uchta narsaga qarang: asset qatorlari (qanday fayllar chiqdi), Entrypoint (jami hajm) va oxirgi qator (muvaffaqiyat va vaqt).

asset assets/main-43121b6b.js 348 bytes [emitted] [immutable] [minimized] (name: main)
asset index.html 325 bytes [emitted] [minimized]
asset assets/main-1bd5561e.css 93 bytes [emitted] [immutable] (name: main)
Entrypoint main 441 bytes = assets/main-1bd5561e.css 93 bytes assets/main-43121b6b.js 348 bytes
orphan modules 3.16 KiB (javascript) 883 bytes (runtime) [orphan] 9 modules
cacheable modules 586 bytes (javascript) 92 bytes (css/mini-extract)
  ./src/main.ts + 1 modules 586 bytes [built] [code generated]
  css ./node_modules/css-loader/dist/cjs.js!./src/style.css 92 bytes [built] [code generated]
webpack 5.111.1 compiled successfully in 12861 ms

(Bu — DefinePlugin qo'shilishidan oldingi build.) O'qish:

• asset … [immutable] [minimized] — fayl, hajmi va belgilari: immutable — nomida hash bor (abadiy keshlash mumkin), minimized — siqilgan. Chunk nomi main — entry ning sukut nomi (Vite'da — index).
• Entrypoint main 441 bytes — sahifa ochilganda yuklanadigan fayllar jami.
• ./src/main.ts + 1 modules — ikki modul birlashtirildi (scope hoisting — menyu.ts main.ts ichiga "eritildi").
• css ./node_modules/css-loader/dist/cjs.js!./src/style.css — ! belgisi loader zanjirini ko'rsatadi: "style.css ni css-loader dan o'tkazib".
• compiled successfully in 12861 ms — birinchi (sovuq) ishga tushish. Keyingilari tezroq.

Nima bo'ldi? webpack main.ts dan graf qurdi, TS'ni babel-loader bilan, CSS'ni css-loader bilan o'girdi. Keyin dist/ ga uchta fayl yozdi: JS, CSS (ikkalasi hash bilan) va HtmlWebpackPlugin yasagan index.html. vite build chiqishi ham xuddi shuni aytadi, faqat qisqaroq.

4.2 Vaqt — o'lchov

Bir xil loyiha, 5 tadan build, butun buyruq vaqti (npx ishga tushishi bilan), mediana. Mashina: Intel Core i5-12500H, 16 ip, 16 GB, Windows 11, Node 24.21.0:

Halol izoh: loyiha juda kichik (3 ta modul), vaqtning katta qismi — Node va vositaning o'zi ishga tushishi. Katta loyihalarda farq boshqacha bo'ladi; raqamli taqqoslashlarni keyingi darsda manbalar bilan ko'ramiz. Bu raqamdan "Vite X marta tez" degan xulosa chiqarmang.

4.3 Dev server — asosiy farq

npx webpack serve --mode development

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:5782/, http://[::1]:5782/
asset assets/main-f2891aa8.js 410 KiB [emitted] [immutable] (name: main)
asset index.html 386 bytes [emitted]
…
    modules by path ./node_modules/webpack-dev-server/client/ 91.9 KiB 8 modules

(Qisqartirildi, tarmoq manzili olib tashlandi.) Diqqat: dev'da webpack avval butun loyihani yig'adi — main-f2891aa8.js 410 KiB, ichida bizning 586 baytlik kodimiz va dev server mijozi, HMR kodi. Faylni o'zgartirsangiz — qayta yig'adi (o'zgarganini, lekin baribir bundle'ni).

Vite dev'da yig'maydi: brauzer qaysi faylni so'rasa, faqat o'shani o'giradi (Vite I). Kichik loyihada farq sezilmaydi, 3 000 modulli loyihada esa webpack dev server bir necha o'n soniyada ochilishi mumkin. Vite'ning "tez" degan shuhrati asosan shu yerdan.

5. webpack ↔ Vite lug'ati

O'zingiz ko'rib turibsiz: vazifalar dagi vite.config.ts (Vite II da qatorma-qator o'qigan) webpack'da taxminan 2–3 baravar uzun bo'lardi — har fayl turi uchun loader, HTML uchun plagin, CSS uchun yana plagin.

6. Create React App va eject

6.1 CRA nima edi

Create React App (CRA) — React jamoasining 2016-yildagi vositasi: npx create-react-app menyu bitta buyruq bilan tayyor React loyihasi berardi. Ichida — webpack, Babel, ESLint, Jest, hammasi sozlangan holda. Config'ni ko'rmaysiz: hammasi react-scripts paketi ichida yashiringan. package.json da:

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

react-scripts ning oxirgi versiyasi — 5.0.1, 2022-yil 12-aprel (npm view react-scripts time bilan tekshirdik). React jamoasi 2025-yil 14-fevralda CRA'ni yangi loyihalar uchun to'xtatilganini e'lon qildi va Vite kabi vositalarni tavsiya qildi. 2022-yildan beri yangilanmagan webpack sozlamasi — eskirgan bog'liqliklar va zaifliklar degani.

6.2 eject — qaytib bo'lmaydigan eshik

npm run eject — react-scripts ichidagi hamma config'ni (webpack, Babel, Jest) loyiha ildiziga ko'chiradi: config/webpack.config.js (bir necha yuz qator), scripts/, package.json ga o'nlab paket. Orqaga yo'l yo'q. Eski loyihada config/ papkasini ko'rsangiz — kimdir eject qilgan. Bunday config'ni o'qish uchun bu darsdagi to'rt tushuncha yetadi: avval entry, output, keyin module.rules, oxirida plugins.

6.3 CRA → Vite: ko'chirish qadamlari

Vite hujjati va React jamoasining tavsiyalariga ko'ra, odatiy tartib:

1. react-scripts ni olib tashlash, vite va @vitejs/plugin-react ni o'rnatish.
2. public/index.html ni loyiha ildiziga ko'chirish, ichiga <script type="module" src="/src/index.jsx"> qo'shish, %PUBLIC_URL% ni olib tashlash (Vite'da /favicon.ico yetarli).
3. REACT_APP_ o'zgaruvchilarni VITE_ ga, kodda process.env.REACT_APP_X ni import.meta.env.VITE_X ga almashtirish (Vite III).
4. JSX bor .js fayllarni .jsx ga o'zgartirish (Vite JSX'ni faqat .jsx/.tsx da kutadi).
5. Skriptlar: "start" → "dev": "vite", "build": "vite build", "preview": "vite preview".

React — 17-qismda; hozir g'oyani biling. Xuddi shu ko'chishni React'siz, kichik loyihada 3-mashqda o'zingiz qilasiz.

Tekshirib ko'ring: Ko'chirgandan keyin Vite loyihasida process.env.BAHOR_API qoldi. Dev'da nima bo'ladi?

6.4 Notanish config'ni o'qish tartibi

Eject qilingan CRA config'i yoki katta kompaniyaning webpack.config.js i 300–800 qator bo'lishi mumkin. Boshidan oxirigacha o'qish shart emas. Sardor uchun tartib:

1. package.json → scripts. Qaysi buyruq qaysi config'ni ishlatadi (webpack --config config/webpack.prod.js)? Ba'zan dev va prod uchun alohida fayllar bo'ladi, umumiy qismi esa webpack-merge bilan qo'shiladi.
2. entry va output. Nechta sahifa, natija qayerga.
3. module.rules. Har test ga qarang — loyiha qaysi fayl turlarini ishlatadi (.scss, .svg, .tsx). Bu — ko'chirishda nima kerakligining ro'yxati.
4. plugins. Har plagin nomini qidiring: ko'pining Vite'da o'xshashi bor yoki u kerak emas.
5. resolve.alias, DefinePlugin. Kodda ishlatiladigan "sehrli" nomlar: @/… va process.env.…. Ko'chganda birinchi buziladigan joylar shular.

mode, devtool, optimization — eng oxirida: ular odatda standart.

6.5 Module Federation

webpack 5 ning Vite'da to'g'ridan-to'g'ri o'xshashi bo'lmagan imkoniyati — Module Federation: bir sayt boshqa (alohida deploy qilingan) saytning modulini ishga tushganda yuklab oladi. Masalan, «Bahor»ning asosiy sayti va admin paneli turli jamoalar tomonidan, turli repo'da yoziladi, lekin "Buyurtma" komponenti bitta. Config'da new ModuleFederationPlugin({ name, remotes, exposes }) ni ko'rsangiz — bu mikro-frontend arxitekturasi, ko'chirish oddiy emas. Vite uchun jamiyat plaginlari bor, Rspack esa uni o'zi qo'llaydi. Bu katta kompaniyalar mavzusi — hozir nomini tanish yetarli.

Tekshirib ko'ring: Eski loyihada webpack.common.js, webpack.dev.js, webpack.prod.js uch fayl bor. Vite'ga ko'chganda nechta config fayl kerak bo'ladi?

7. Ko'p uchraydigan xatolar

7.1 npm audit fix --force — "tuzatish" eski versiyani o'rnatadi

Bizning webpack loyihasida npm audit (qisqartirilgan). Ikki qatorga qarang: zaif paket nomi (braces) va Will install … — npm taklif qilgan "tuzatish":

braces  *
Severity: high
braces vulnerable to stack-exhaustion denial of service through deeply nested patterns - https://github.com/advisories/GHSA-vfj7-8cjw-p6xm
fix available via `npm audit fix --force`
Will install webpack-dev-server@1.14.1, which is a breaking change
…
5 high severity vulnerabilities

Zaiflik braces da, u micromatch → http-proxy-middleware → webpack-dev-server → webpack-cli zanjiri orqali keladi. npm'ning "yechimi" — webpack-dev-server@1.14.1 (2016-yilgi versiya!) o'rnatish: braces ga bog'lanmagan eng yaqin versiya shu. Bu loyihani butunlay buzadi. --force ni o'ylamasdan bosmang: avval zanjirni o'qing, keyin Ta'minot zanjiri va Bog'liqliklarni yangilash darslaridagi usullar (overrides, yangilanishni kutish). Bu zaiflik faqat dev server'da (sizning kompyuteringizda) — saytga chiqmaydi, xavfi past.

7.2 Loader tartibi

use massivi o'ngdan chapga — yuqoridagi savol.

7.3 babel-loader tur xatolarini ko'rsatmaydi

webpack build "muvaffaqiyatli", tsc esa xato topadi. Eski loyihalarda ko'pincha fork-ts-checker-webpack-plugin turadi — u tsc ni alohida jarayonda ishlatadi (Vite'dagi vite-plugin-checker ning o'xshashi).

7.4 process.env brauzerda

webpack 4 process ni avtomatik "soxtalashtirar" (polyfill) edi, webpack 5 — yo'q. webpack 4 → 5 ko'chishda process is not defined — eng ko'p uchraydigan xato.

8. Mashqlar

1-mashq (oson): Lug'at

webpack config'idagi qatorga Vite'dagi o'xshashini yozing:

1. entry: "./src/index.js" —
2. new HtmlWebpackPlugin({ template: "public/index.html" }) —
3. devServer: { port: 3000 } — server: { : 3000 }
4. new webpack.DefinePlugin({ "process.env.API": … }) — import.meta.env.
5. output: { path: "build" } — build: { : "build" }

2-mashq (o'rta): Begona config'ni o'qing

Quyidagi parcha eski loyihadan. Savollarga javob bering:

module.exports = {
  entry: { app: "./src/app.js", admin: "./src/admin.js" },
  output: { filename: "[name].[contenthash].js" },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      { test: /\.png$/, type: "asset/resource" },
    ],
  },
  resolve: { alias: { "@": path.resolve(__dirname, "src") } },
};

1. Nechta kirish nuqtasi va natijada nechta asosiy JS fayl?
2. .scss fayl qaysi tartibda qayta ishlanadi?
3. module.exports va __dirname nima deydi (ESM yoki CommonJS)?
4. import logo from "@/rasmlar/logo.png" — logo da nima bo'ladi?

3-mashq (qiyin): webpack'dan Vite'ga ko'chiring

kurs/mashqlar/16/33-webpack/webpack/ — darsdagi webpack loyihasi (webpack.config.js, public/index.html, src/main.ts da process.env.BAHOR_API). Uni vite/ papkasiga ko'chiring: index.html ildizda, process.env yo'q, npx tsc --noEmit toza, npx vite build ichida API manzili bor, dev server 5782 portda va /api proxy bilan.

// vite.config.ts — webpack.config.js dan ko'chirilgan (3-mashq)
import { defineConfig } from "vite";

export default defineConfig({
  // entry, HtmlWebpackPlugin — index.html o'zi
  // loader'lar (babel, css, MiniCssExtract) — Vite'da tayyor
  // DefinePlugin(process.env.BAHOR_API) — .env dagi VITE_BAHOR_API
  server: {
    port: 5782,
    proxy: {
      "/api": { target: "https://ilmhamroh.uz", changeOrigin: true },
    },
  },
});

9. Real ishda

• Ish e'lonlarida "webpack" hali ko'p uchraydi — ayniqsa 2018–2022-yillarda boshlangan loyihalarda. Ko'pincha vazifa: "webpack'dan Vite'ga ko'chiring" yoki "build'ni tezlashtiring".
• Next.js uzoq yillar webpack bilan yig'ilgan, 16-versiyada (2025-oktabr) sukut bo'yicha Turbopack'ga o'tdi. Eski next.config.js larda hali webpack(config) { … } funksiyasini ko'rasiz (23-qismda).
• Rspack — webpack config'ini deyarli o'zgarishsiz tushunadigan, Rust'da yozilgan bundler: katta webpack loyihalari uchun "tez yo'l" (Bundlerlar landshafti).
• Intervyu savollari: "Loader va plagin farqi?", "webpack va Vite farqi?" (javob: dev'da bundle va native ESM; kirish JS va HTML), "eject nima?".

Xulosa

• webpack config — to'rt tushuncha: entry (JS fayl), output, loader (module.rules, bitta fayl, o'ngdan chapga) va plagin (butun build, new …()).
• Vite'da kirish — index.html; TS, CSS, rasm uchun loader kerak emas; DefinePlugin → define/import.meta.env; devServer → server.
• webpack dev'da butun loyihani yig'adi (bizda 410 KiB), Vite — faqat so'ralgan faylni o'giradi.
• CRA (react-scripts 5.0.1, 2022) — 2025-yilda to'xtatilgan; ko'chish: index.html ildizga, REACT_APP_ → VITE_, .js → .jsx.
• npm audit fix --force eski loyihada xavfli: bizda webpack-dev-server@1.14.1 ni taklif qildi.

Keyingi dars: Bundlerlar landshafti 2026: Rolldown, Turbopack, Rspack, esbuild — qaysi bundler qayerda va nega Rust asosidagi vositalar oldinga chiqdi.

Manbalar

• webpack hujjatlari: "Concepts" (entry, output, loaders, plugins), "Asset Modules" — webpack.js.org/concepts/
• React blog: "Sunsetting Create React App", 2025-02-14 — react.dev/blog
• Vite hujjatlari: "Migration" va "Env Variables" — vite.dev
• O'lchov: webpack 5.111.1, Vite 8.3.3, Node 24.21.0, Windows 11, 2026-10