वेबपैक में CSS बंडल बिल्ड सेटअप

पृष्ठ पर CSS जोड़ने का सीखा गया तरीका बहुत सफल नहीं हो सकता है। अक्सर अधिक सुविधाजनक होता है सभी CSS फाइलों को स्टाइल्स के साथ एक अलग बंडल में इकट्ठा करना।

इसके लिए प्लगइन की आवश्यकता होती है 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 को हमारे प्लगइन के लोडर से बदलते हैं:

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