Webpack-да Assetsлар

Ҳар бир лойиҳада маълум ресурслар ёки ассетлар (assets) мавжуд. Бу ассетлар расмлар, шрифт файллари ва шу ўхшаш нарсалардан иборат.

Одатда, биз ресурсларни лойиҳа папкасидан тайёрлаш папкасига кўчирмоқчимиз. Лекин яна кеш муаммоси пайдо бўлади. Мисол учун, браузер расмларни кешлайди. Бу шунни англатадики, агар биз расмни ўзгартирсак, лекин унинг файл номини ўзгартирмасак, сайт фойдаланувчилари аввалги версиядаги расмни кўришади, чунки у уларда кешланган бўлади.

Муаммони ечими, сизга маълум бўлганидек, файл номига хеш қўшишдир. Webpack ресурс файлларини тайёрлаш папкасига кўчиришга, уларга хеш қўшишга ва, энг мухими, барча файллардаги бу ресурсларга бўлган йўлларни янгиларина алмаштиришга имкон беради.

Webpack-да ассетлар билан ишлаш махсус 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' // модул тури
    }
  ]
},