Yüzlərlə modul, npm paketləri, CSS, TypeScript və şəkillər brauzerə necə çatır? Bunu bundler (yığıcı) həll edir: layihənizi giriş faylından başlayaraq izləyir və brauzerə hazır bir neçə faylda birləşdirir.

Bundler-in işi
Bundler-in işi

Bundler niyə lazımdır

Brauzer ES modullarını artıq başa düşür, amma real layihədə bundler hələ də üç problemi həll edir:

  • Sorğuların sayı və ölçü. Yüzlərlə kiçik fayl əvəzinə bir neçə optimallaşdırılmış fayl.
  • npm və xüsusi formatlar. import _ from 'lodash', TypeScript, JSX, Sass brauzerin birbaşa başa düşmədiyi şeylərdir.
  • Optimallaşdırma. Minifikasiya, ölü kodun silinməsi, keş üçün hash-li fayl adları.

Proses: entry → asılılıq qrafı → çevirmə (loader/plugin) → optimallaşdırma → output.

webpack: əsas konfiqurasiya

bash
npm i -D webpack webpack-cli
npx webpack
js
// webpack.config.js
const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    clean: true,
  },
  module: {
    rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'] }],
  },
};