Webpack-ի Լոադերներ

Webpack-ի հնարավորությունները ընդլայնելու համար օգտագործվում են նաև լոադերներ։ Դրանք հնարավորություն են տալիս վերցնել որոշակի տիպի ֆայլեր և դրանցով կատարել որոշակի գործողություններ։

Օրինակ, կարելի է վերցնել բոլոր .less ընդլայնմամբ ֆայլերը, դրանց տեքստը վերափոխել CSS-ի, ապա ստացված CSS-ը մինիֆիկացնել և պահպանել մեկ ընդհանուր ֆայլում։

Եկեք դիտարկենք լոադերի հետ աշխատելու ընդհանուր սխեման երկու երևակայական լոադերների օրինակով։

Եկեք տեղադրենք առաջին լոադերը.

terminalnpm install test-loader1 --save-dev

Եկեք տեղադրենք երկրորդ լոադերը.

terminalnpm install test-loader2 --save-dev

Լոադերների տեղադրումից հետո մենք կարող ենք օգտագործել դրանք կոնֆիգուրացիայի ֆայլում (դրանք իմպորտելու կարիք չկա)։ Տեսեք շարահյուսությունը.

webpack.config.jsexport default {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.css$/i, // ֆայլի տիպը
        use: ['test-loader1', 'test-loader2'], // լոադերները
      },
    ],
  },
};

Զանգվածի տարրերը կարելի է գրել ոչ թե տողով, այլ սյունակով.

webpack.config.jsexport default {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          'test-loader1',
          'test-loader2'
        ],
      },
    ],
  },
};

Տարբեր տիպի ֆայլերի համար կարելի է գրել տարբեր կանոններ.

webpack.config.jsexport default {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.sass$/i,
        use: [
          'test-loader1',
          'test-loader2'
        ],
      },
      {
        test: /\.less$/i,
        use: [
          'test-loader3',
          'test-loader4'
        ],
      },
    ],
  },
};