Webpack හි 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'],
      },
    ],
  },
};