Ρύθμιση της συλλογής CSS σε bundle στο Webpack

Ο μελετημένος τρόπος προσθήκης CSS στη σελίδα μπορεί να μην είναι πολύ επιτυχημένος. Συχνά είναι πιο βολικό να συλλέγονται όλα τα αρχεία CSS σε ένα ξεχωριστό bundle με στυλ.

Για αυτό χρειάζεται το plugin mini-css-extract-plugin. Ας το εγκαταστήσουμε:

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

Ας το εισάγουμε:

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

Ας το προσθέσουμε στη ρύθμιση plugins:

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

Τώρα ας αντικαταστήσουμε το style-loader με τον loader από το plugin μας:

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