Принсипи кории Webpack дар JavaScript

Одатан, дар вақти таҳия мо бо зиёд файлҳои JavaScript саровем, ки порчаҳои гуногуни кодро дар бар мегиранд. Ин метавонад қисмҳои коди мо, ё китобхонаҳои ғайридоимӣ бошад. Маълум мешавад, ки ҳар як чунин файлро мо бояд ба файли HTML тавассути теги script пайваст кунем.

Ин хеле хуб нест, зерко бисёр файлҳои пайвастшуда суръати боркуниро сайт суст мекунанд. Аз ин рӯ, барои тез кардани боркунӣ зарур аст, ки тамоми кодиро дар як файл гузорем.

Аммо, дар як файли умумӣ таҳия кардани код низ хеле мусоид нест. Аз ин рӯ ҳоло равиши зерин амалӣ карда мешавад: код дар файлҳои алоҳида таҳия мешавад, ва он гоҳ бо ёрии сборщик дар як файли умумӣ гирд оварда мешавад, ки ба файли HTML пайваст мешавад.

Файлҳои алоҳида модулҳои ES-ро ташкил медиҳанд. Ин модулҳо ба файлҳои дигар тавассути фармони import пайваст мешаванд.

Одатан файли асосии маълумеро месозанд, ки файлҳои дигар ба он пайваст мешаванд. Ин файл нуқтаи дохилшавӣ номида мешавад.

Сборщик ба нуқтаи дохилшавӣ дохил мешавад, мебинад, ки кадом модулҳо пайваст шудаанд ба он. Ба ин модулҳо низ метавонанд модулҳои дигар пайваст шуда бошанд. Сборщик ба ҳама пайвастиҳо пайравӣ мекунад ва тамоми кодиро дар як файл ҷамъ мекунад. Ин файл бандл номида мешавад.

Одатан, коде, ки барномасоз менависад, дар ҷузъдони src ҷойгир аст, ва коди ҷамъоварӣшуда дар ҷузъдони dist гузошта мешавад.

Сборщик низ имкон медиҳад, ки реҷаи ҷамъовариро танзим кунем. Реҷаи 'development' барои раванди таҳия пешбинӣ шудааст. Он кодро ба таври мусоиди таҳия ҷамъ мекунад. Реҷаи 'production' пешбинӣ шудааст барои коди ниҳоие, ки ба кор гузошта мешавад. Дар ин реҷа код минифитсия карда мешавад, то андозаи он кам карда шавад ва суръати боркуниаш зиёд карда шавад.