Webpack හි Assets

සෑම ව්‍යාපෘතියකම යම් සම්පත් හෝ assets (assets) ඇත. මෙම assets පින්තූර, අකුරු රුප ගොනු සහ ඒ හා සමාන වෙනත් දේවල් වේ.

සාමාන්‍යයෙන්, අපට අවශ්‍ය වන්නේ ව්‍යාපෘති ෆෝල්ඩරයෙන් සම්පත් එකතු කිරීමේ ෆෝල්ඩරයට පිටපත් කිරීම පමණි. නමුත් නැවතත් කෑෂ් ගැටළුව පැනනගී. උදාහරණයක් ලෙස, බ්‍රවුසරය පින්තූර කෑෂ් කරයි. මෙයින් අදහස් කරන්නේ අපි පින්තූරයක් වෙනස් කළත්, එහි ගොනු නාමය වෙනස් නොකළහොත්, අඩවියේ පරිශීලකයින්ට පෙර අනුවාදයේ පින්තූරය දිස්වන බවයි, මන්ද එය ඔවුන්ගේ කෑෂ් තුළ ඇත.

ගැටලුවට විසඳුම, ඔබ දැනටමත් දන්නා පරිදි, ගොනු නාමයට හැෂ් එක් කිරීමයි. Webpack සම්පත් ගොනු එකතු කිරීමේ ෆෝල්ඩරයට පිටපත් කිරීමට ඉඩ සලසයි, ඒ සමගම හැෂ් එකතු කරන අතර, වඩාත්ම වැදගත්ව, සියලුම ගොනුවල මෙම සම්පත් වෙත ඇති මාර්ග නව මාර්ග වෙත වෙනස් කරයි.

Webpack හි, assets සමඟ වැඩ කිරීම සිදු කරනු ලබන්නේ විශේෂ assets-මොඩියුල භාවිතා කරමිනි. ඒවා අවර්ග හතරකි: asset/resource, asset/inline, asset/source, asset.

asset/resource මොඩියුලය ව්‍යාපෘති ෆෝල්ඩරයෙන් ගොනු එකතු කිරීමේ ෆෝල්ඩරයට පිටපත් කර ඒවාට ඇති මාර්ග නව මාර්ග වෙත ප්‍රතිස්ථාපනය කරයි. asset/inline මොඩියුලය ව්‍යාපෘති ෆෝල්ඩරයෙන් ගොනු ගෙන එකතු කිරීමේ කේතය තුළ ගොනු වෙත ඇති මාර්ග base64 ලෙසට ප්‍රතිස්ථාපනය කරයි. asset/source මොඩියුලය ව්‍යාපෘති ෆෝල්ඩරයෙන් ගොනු ගෙන ඒවා පෙළ ස්ට්‍රිං ලෙස ආපසු ලබා දෙයි. asset මොඩියුලය තමාම තෝරා ගනී, ගොනුව එකතු කිරීමේ ෆෝල්ඩරයට පිටපත් කරන්නද නැතිනම් එය base බවට පත් කරන්නද. තෝරාගැනීම සිදු කරනු ලබන්නේ ගොනුවේ ප්‍රමාණය මත රඳා පවතිමිනි. පෙරනිමිය ලෙස ගොනු 8kb ට වඩා වැඩි නම් ගොනු ලෙස එකතු කරනු ලැබේ.

මෙම මොඩියුල යෙදීමේ සාමාන්‍ය යෝජනා ක්‍රමය පහත පරිදි වේ:

webpack.config.jsmodule: {
  rules: [
    {
      test: /\.png$/,        // ගොනු
      type: 'asset/resource' // මොඩියුල වර්ගය
    }
  ]
},