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'
        ],
      },
    ],
  },
};