Cấu hình đóng gói CSS thành bundle trong Webpack

Cách thêm CSS vào trang đã học có thể không phải là cách tối ưu. Thông thường, việc gom tất cả các file CSS thành một bundle riêng chứa styles sẽ thuận tiện hơn.

Để làm điều này, cần có plugin mini-css-extract-plugin. Hãy cài đặt nó:

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

Import nó:

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

Thêm vào cấu hình plugins:

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

Bây giờ hãy thay thế style-loader bằng loader từ plugin của chúng ta:

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