Webpack හි ලෝඩර්

Webpack හි හැකියාවන් ව්‍යාප්ත කිරීම සඳහා ලෝඩර් ද භාවිතා වේ. ඒවා යම් ආකාරයක ගොනු ගෙන ඒවා සමඟ යම් මෙහෙයුම් සිදු කිරීමට ඉඩ සලසයි.

උදාහරණයක් ලෙස, .less දිගුව සහිත සියලු ගොනු ගෙන, ඒවායේ පෙළ CSS බවට පරිවර්තනය කර, ඉන්පසු ලැබෙන CSS සුළු කර එක් පොදු ගොනුවක ගබඩා කළ හැකිය.

අපි උපකල්පිත ලෝඩර් දෙකක උදාහරණය භාවිතා කර ලෝඩරයක් සමඟ වැඩ කිරීමේ සාමාන්ය යෝජනා ක්‍රමය බලමු.

පළමු ලෝඩරය ස්ථාපනය කරමු:

terminalnpm install test-loader1 --save-dev

දෙවන ලෝඩරය ස්ථාපනය කරමු:

terminalnpm install test-loader2 --save-dev

ලෝඩර් ස්ථාපනය කිරීමෙන් පසු, අපට වින්‍යාස ගොනුවේ ඒවා භාවිතා කළ හැකිය (ඒවා ආයාත කිරීම අවශ්‍ය නොවේ). වාක්‍ය ඛණ්ඩය බලන්න:

webpack.config.jsexport default {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.css$/i, // ගොනු වර්ගය
        use: ['test-loader1', 'test-loader2'], // ලෝඩර්
      },
    ],
  },
};

අරාවේ මූලද්‍රව්‍ය පේළියක ලිවීම වෙනුවට, තීරුවක ලිවිය හැකිය:

webpack.config.jsexport default {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          'test-loader1',
          'test-loader2'
        ],
      },
    ],
  },
};

විවිධ ගොනු වර්ග සඳහා විවිධ නීති ලිවිය හැකිය:

webpack.config.jsexport default {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.sass$/i,
        use: [
          'test-loader1',
          'test-loader2'
        ],
      },
      {
        test: /\.less$/i,
        use: [
          'test-loader3',
          'test-loader4'
        ],
      },
    ],
  },
};