Loader dalam Webpack

Untuk mengembangkan keupayaan Webpack, loader juga digunakan. Ia membenarkan pengambilan fail jenis tertentu dan melakukan operasi tertentu ke atasnya.

Sebagai contoh, anda boleh mengambil semua fail dengan sambungan .less, mengubah teksnya kepada CSS, kemudian meminimumkan CSS yang diperoleh dan menyimpannya dalam satu fail umum.

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

Mari pasang loader pertama:

terminalnpm install test-loader1 --save-dev

Mari pasang loader kedua:

terminalnpm install test-loader2 --save-dev

Selepas pemasangan loader, kami boleh menggunakannya dalam fail konfigurasi (tidak perlu diimport). Lihat sintaks:

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

Elemen array boleh ditulis bukan dalam satu baris, tetapi dalam lajur:

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

Untuk jenis fail yang berbeza, anda boleh menulis peraturan yang berbeza:

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