Лоадеры ў 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'
        ],
      },
    ],
  },
};