CSS Bundle Izveides Iestatīšana Webpack

Iepriekš apgūtā CSS pievienošanas metode lapā var izrādīties ne pārāk veiksmīga. Bieži vien ir ērtāk savākt visus CSS failus atsevišķā stilu bundle.

Šim nolūkam ir nepieciešams spraudnis mini-css-extract-plugin. Uzstādīsim to:

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

Importēsim to:

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

Pievienosim iestatījumu plugins:

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

Tagad aizstāsim style-loader ar loader no mūsu spraudņa:

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