Penyelenggaraan Pembungkusan CSS dalam Webpack

Cara menambahkan CSS ke halaman yang telah dipelajari mungkin tidak begitu sesuai. Sering kali lebih mudah untuk mengumpulkan semua fail CSS dalam bundle stylesheet yang berasingan.

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

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

Import plugin tersebut:

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

Tambahkan dalam konfigurasi plugins:

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

Sekarang gantikan style-loader dengan loader dari plugin kami:

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