Konfigurasi Pembundelan CSS dalam Webpack

Cara yang telah dipelajari untuk menambahkan CSS ke halaman mungkin tidak terlalu ideal. Seringkali lebih nyaman untuk mengumpulkan semua file CSS dalam bundle terpisah dengan gaya.

Untuk ini, diperlukan plugin mini-css-extract-plugin. Mari kita instal:

terminalnpm install mini-css-extract-plugin --save-dev

Impor plugin tersebut:

webpack.config.jsimport MiniCssExtractPlugin from 'mini-css-extract-plugin';

Tambahkan ke konfigurasi plugins:

webpack.config.jsexport default {
  entry: './src/index.js',
  plugins: [new MiniCssExtractPlugin()],
};

Sekarang ganti style-loader dengan loader dari plugin kita:

webpack.config.jsexport default {
  entry: './src/index.js',
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
};