Ի՞նչ է Webpack-ը

Webpack-ը JavaScript-ի մոդուլային bundler է, որը թույլ է տալիս ծրագրավորողներին արդյունավետ կերպով կառավարել իրենց ծրագրի կախվածությունները։ Այն հավաքում է տարբեր ֆայլեր (JavaScript, CSS, պատկերներ և այլն) մեկ միասնական bundle-ի մեջ, ինչը բարելավում է կատարման արագությունը և բրաուզերում բեռնման արդյունավետությունը։

Ինչու՞ օգտագործել Webpack

1. Մոդուլային կառավարման հեշտացում – Webpack-ը թույլ է տալիս բեռնել միայն անհրաժեշտ մոդուլները, ինչը բարելավում է կատարողականությունը։
2. Կախվածությունների լուծում – Ավտոմատ կերպով հայտնաբերում և լուծում է մոդուլային կախվածությունները։
3. Օպտիմիզացիա – Բարելավում է ֆայլերի բեռնման արագությունը՝ օգտագործելով տարբեր օպտիմիզացիոն մեթոդներ։

Ինչպես է աշխատում Webpack-ը

Webpack-ը գործում է հետևյալ հիմնական բաղադրիչների միջոցով՝

Entry Point

Entry Point հիմնական ֆայլը, որը Webpack-ը վերցնում է որպես ելակետ՝ բոլոր կախվածությունները բեռնելու համար։ Օրինակ՝

    module.exports = {
      entry: './src/index.js'
    };

Output

Output – ֆայլը, որտեղ պահվում է վերջնական bundle-ը։ Օրինակ՝

    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    }

Loaders

Loaders – օգնում են մշակել ոչ-JavaScript ֆայլերը (CSS, նկարներ, ֆոնտեր և այլն)։ Օրինակ՝

    module: {
      rules: [
        { test: /\.css$/, use: ['style-loader', 'css-loader'] },
        { test: /\.png$/, use: ['file-loader'] }
      ]
    }

Plugins

Plugins – ավելացնում են հավելյալ հնարավորություններ, օրինակ՝ HtmlWebpackPlugin, որը ավտոմատ կերպով ստեղծում է HTML ֆայլ։ Օրինակ՝

    const HtmlWebpackPlugin = require('html-webpack-plugin');

    module.exports = {
      plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })]
    };

Mode

Mode – թույլ է տալիս ընտրել development կամ production ռեժիմ։ Օրինակ՝

    mode: 'production'

Webpack-ի կոնֆիգուրացիան

Webpack-ի հիմնական կոնֆիգուրացիան սահմանվում է webpack.config.js ֆայլում։ Ահա մի օրինակ՝

    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
      entry: './src/index.js',
      output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
      },
      mode: 'development',
      module: {
        rules: [
          { test: /\.css$/, use: ['style-loader', 'css-loader'] },
          { test: /\.png$/, use: ['file-loader'] }
        ]
      },
      plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })]
    };

Օպտիմիզացիա Webpack-ով

Code Splitting

Code Splitting – թույլ է տալիս կոդը բաժանել մի քանի bundle-ների, նվազեցնելով հիմնական ֆայլի չափը։ Օրինակ՝

    module.exports = {
      optimization: {
        splitChunks: {
          chunks: 'all',
        },
      },
    };

Tree Shaking

Tree Shaking – հեռացնում է չօգտագործվող կոդը՝ բարելավելով ծրագրի կատարումը։

Caching

Caching – օգտագործում է hash-ավորած ֆայլեր, որպեսզի բրաուզերը չբեռնի նույն ֆայլը բազմիցս։

Minification

Minification – կրճատում և օպտիմալացնում է JavaScript կոդը TerserPlugin-ի կամ Webpack-ի ներկառուցված հնարավորությունների միջոցով։

    const TerserPlugin = require('terser-webpack-plugin');
    module.exports = {
      optimization: {
        minimize: true,
        minimizer: [new TerserPlugin()],
      },
    };

Webpack-ը vs Այլ Build Tools-եր

Հնարավորություն	Webpack	Vite	Parcel	ESBuild
Մոդուլային bundling	✅	✅	✅	✅
Արագություն	Միջին	Շատ արագ	Արագ	Շատ արագ
Կոնֆիգուրացիա	Պահանջվում է	Գործնականում պետք չէ	Հեշտ	Հեշտ
Օպտիմիզացիա	✅	✅	✅	✅