Loader di Webpack

Untuk memperluas kemampuan Webpack, loader juga digunakan. Mereka memungkinkan untuk mengambil file dengan tipe tertentu dan melakukan operasi tertentu pada file tersebut.

Sebagai contoh, Anda dapat mengambil semua file dengan ekstensi .less, mengubah teksnya menjadi CSS, lalu meminimalkan CSS yang dihasilkan dan menyimpannya dalam satu file umum.

Mari kita lihat skema umum cara bekerja dengan loader menggunakan contoh dua loader imajiner.

Mari instal loader pertama:

terminalnpm install test-loader1 --save-dev

Mari instal loader kedua:

terminalnpm install test-loader2 --save-dev

Setelah menginstal loader, kita dapat menggunakannya dalam file konfigurasi (tidak perlu mengimpornya). Lihat sintaksnya:

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

Elemen array dapat ditulis tidak dalam satu baris, namun dalam kolom:

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

Untuk tipe file yang berbeda, dapat ditulis aturan yang berbeda:

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