Modern web geli\u015ftirme d\u00fcnyas\u0131nda, ara\u00e7lar ve otomasyon, geli\u015ftirme s\u00fcrecinin ayr\u0131lmaz bir par\u00e7as\u0131 haline gelmi\u015ftir. \u00d6zellikle tek sayfa uygulamalar\u0131 (SPA’lar) ve karma\u015f\u0131k \u00f6n y\u00fcz projeleri geli\u015ftirirken, kodun derlenmesi, paketlenmesi, optimize edilmesi ve taray\u0131c\u0131 taraf\u0131ndan anla\u015f\u0131l\u0131r hale getirilmesi gibi g\u00f6revler kritik \u00f6neme sahiptir. \u0130\u015fte tam bu noktada Webpack gibi mod\u00fcl paketleyiciler (module bundlers) devreye girer. Vue.js ekosisteminde ise, Vue CLI (Command Line Interface), bu karma\u015f\u0131k yap\u0131land\u0131rmalar\u0131n \u00e7o\u011funu bizim i\u00e7in soyutlayarak, geli\u015ftiricilerin do\u011frudan uygulama mant\u0131\u011f\u0131na odaklanmas\u0131n\u0131 sa\u011flar. Ancak, Vue CLI’nin sa\u011flad\u0131\u011f\u0131 bu kolayl\u0131k, alt\u0131nda yatan Webpack mekanizmalar\u0131n\u0131 tamamen g\u00f6z ard\u0131 etmemiz gerekti\u011fi anlam\u0131na gelmez. Tam aksine, Webpack’in Vue projelerindeki rol\u00fcn\u00fc ve nas\u0131l yap\u0131land\u0131r\u0131ld\u0131\u011f\u0131n\u0131 anlamak, performans sorunlar\u0131n\u0131 gidermek, \u00f6zel ihtiya\u00e7lara y\u00f6nelik optimizasyonlar yapmak ve geli\u015ftirme s\u00fcrecini daha verimli hale getirmek i\u00e7in vazge\u00e7ilmez bir beceridir.<\/p>\n
Bu makalede, Vue CLI projelerindeki Webpack konfig\u00fcrasyonunun derinliklerine inecek, Vue CLI’nin Webpack’i nas\u0131l kulland\u0131\u011f\u0131n\u0131, varsay\u0131lan ayarlar\u0131 nerede bulabilece\u011fimizi ve Webpack, modern JavaScript uygulamalar\u0131 i\u00e7in statik mod\u00fclleri bir araya getiren (bundle eden) a\u00e7\u0131k kaynakl\u0131 bir mod\u00fcl paketleyicidir. Temel amac\u0131, farkl\u0131 t\u00fcrdeki dosyalar\u0131 (JavaScript, CSS, g\u00f6rseller, fontlar vb.) ba\u011f\u0131ml\u0131l\u0131k grafiklerine g\u00f6re analiz etmek ve bunlar\u0131 taray\u0131c\u0131da \u00e7al\u0131\u015ft\u0131r\u0131labilecek statik varl\u0131klara d\u00f6n\u00fc\u015ft\u00fcrmektir. Peki, Webpack’i neden kullan\u0131r\u0131z ve hangi temel kavramlar\u0131 i\u00e7erir?<\/p>\n * Mod\u00fcl Paketleme (Module Bundling):<\/strong> Geli\u015ftirdi\u011fimiz uygulamalar genellikle y\u00fczlerce hatta binlerce farkl\u0131 JavaScript dosyas\u0131, CSS dosyas\u0131, resim ve di\u011fer varl\u0131klardan olu\u015fur. Taray\u0131c\u0131n\u0131n bu kadar \u00e7ok HTTP iste\u011fi yapmas\u0131 performans\u0131 d\u00fc\u015f\u00fcr\u00fcr. Webpack, bu mod\u00fclleri analiz eder ve daha az say\u0131da, daha b\u00fcy\u00fck “paketler” (bundles) halinde birle\u015ftirir. Bu, taray\u0131c\u0131n\u0131n daha az HTTP iste\u011fi yapmas\u0131n\u0131 sa\u011flayarak y\u00fckleme s\u00fcrelerini iyile\u015ftirir. Webpack’in temel yap\u0131land\u0131rma \u00f6\u011feleri \u015funlard\u0131r:<\/p>\n * Entry (Giri\u015f Noktas\u0131):<\/strong> Webpack’in uygulaman\u0131z\u0131 paketlemeye nereden ba\u015flayaca\u011f\u0131n\u0131 belirten mod\u00fcld\u00fcr. Genellikle uygulaman\u0131z\u0131n ana JavaScript dosyas\u0131d\u0131r (\u00f6rne\u011fin, Bu temel kavramlar, Vue CLI’nin alt\u0131nda yatan Webpack yap\u0131s\u0131n\u0131 anlamak i\u00e7in sa\u011flam bir temel olu\u015fturur.<\/p>\n Vue CLI, Vue.js uygulamalar\u0131 olu\u015fturmak ve y\u00f6netmek i\u00e7in standart bir ara\u00e7t\u0131r. Yeni bir Vue projesi ba\u015flatt\u0131\u011f\u0131n\u0131zda ( Vue CLI projesinin kalbinde Vue CLI’nin g\u00fczelli\u011fi, Webpack yap\u0131land\u0131rmas\u0131n\u0131 soyutlamas\u0131 ve \u00e7o\u011fu zaman bu yap\u0131land\u0131rmay\u0131 do\u011frudan d\u00fczenlemenize gerek kalmamas\u0131d\u0131r. Ancak, bu varsay\u0131lan yap\u0131land\u0131rmay\u0131 g\u00f6rmek isterseniz, Vue CLI bunun i\u00e7in bir yol sunar:<\/p>\n Bu komut, Vue CLI’nin o anki Webpack yap\u0131land\u0131rmas\u0131n\u0131, Vue CLI, Webpack konfig\u00fcrasyonunu do\u011frudan bir JavaScript nesnesi olarak y\u00f6netmek yerine, Vue CLI, varsay\u0131lan Webpack yap\u0131land\u0131rmas\u0131n\u0131 geni\u015fletmek veya de\u011fi\u015ftirmek i\u00e7in * Object olarak kullan\u0131m:<\/strong> E\u011fer sadece birka\u00e7 temel Webpack ayar\u0131n\u0131 eklemek veya de\u011fi\u015ftirmek istiyorsan\u0131z, Bu yakla\u015f\u0131m, Webpack’in varsay\u0131lan ayarlar\u0131n\u0131 tamamen \u00fczerine yazmak yerine, mevcut ayarlar\u0131 geni\u015fletir veya belirli \u00f6zelliklerini de\u011fi\u015ftirir. Ancak, e\u011fer dahili bir loader’\u0131 veya plugin’i tamamen de\u011fi\u015ftirmek veya kald\u0131rmak isterseniz, bu y\u00f6ntem yeterli olmayabilir.<\/p>\n * Function olarak kullan\u0131m:<\/strong> Daha karma\u015f\u0131k senaryolarda veya Vue CLI’nin dahili Webpack yap\u0131land\u0131rmas\u0131na eri\u015fmeniz gerekti\u011finde, Fonksiyon yakla\u015f\u0131m\u0131, Webpack yap\u0131land\u0131rmas\u0131 \u00fczerinde daha fazla kontrol sa\u011flar, ancak dikkatli kullan\u0131lmal\u0131d\u0131r \u00e7\u00fcnk\u00fc do\u011frudan nesne manip\u00fclasyonu, gelecekteki Vue CLI g\u00fcncellemeleriyle uyumluluk sorunlar\u0131na yol a\u00e7abilir.<\/p>\n * Mod\u00fclerlik:<\/strong> Her de\u011fi\u015fiklik, belirli bir kural veya eklenti \u00fczerinde odaklan\u0131r, bu da konfig\u00fcrasyonu daha okunakl\u0131 ve y\u00f6netilebilir hale getirir. Ne Zaman Hangisini Kullanmal\u0131?<\/strong><\/p>\n * \u00c7o\u011fu durumda, Vue CLI, projenizde ortam de\u011fi\u015fkenlerini y\u00f6netmek i\u00e7in \u00f6zel bir mekanizma sunar. Bu de\u011fi\u015fkenlere uygulaman\u0131zda Projenizde uzun ve karma\u015f\u0131k g\u00f6receli yollar kullanmak yerine, takma adlar (alias) tan\u0131mlamak kodunuzu daha okunakl\u0131 hale getirir. Vue CLI varsay\u0131lan olarak Art\u0131k Webpack loader’lar\u0131, farkl\u0131 dosya t\u00fcrlerini i\u015flemek i\u00e7in kullan\u0131l\u0131r. Vue CLI, Sass, Less, Stylus gibi CSS \u00f6n i\u015flemcileri i\u00e7in varsay\u0131lan loader’lar\u0131 zaten yap\u0131land\u0131rm\u0131\u015ft\u0131r. Ancak, bu loader’lar\u0131n se\u00e7eneklerini de\u011fi\u015ftirmek isteyebilirsiniz.<\/p>\n Sass Loader Se\u00e7eneklerini De\u011fi\u015ftirme:<\/strong><\/p>\n PostCSS Ayarlar\u0131:<\/strong><\/p>\n Webpack plugin’leri, paketleme s\u00fcrecinin daha geni\u015f g\u00f6revlerini yerine getirir. Vue CLI, Mevcut bir Plugin’i De\u011fi\u015ftirme:<\/strong><\/p>\n Yeni bir Plugin Ekleme:<\/strong><\/p>\n \u00d6rne\u011fin, bir Geli\u015ftirme sunucusu (dev server) ayarlar\u0131, \u00dcretim derlemeleri i\u00e7in performans optimizasyonlar\u0131 kritik \u00f6neme sahiptir. Vue CLI, varsay\u0131lan olarak bir\u00e7ok optimizasyon yapar, ancak bunlar\u0131 daha da ince ayarlayabilirsiniz.<\/p>\n * Code Splitting (Kod B\u00f6lme):<\/strong> Uygulaman\u0131z\u0131n t\u00fcm kodunu tek bir b\u00fcy\u00fck dosyaya paketlemek yerine, farkl\u0131 par\u00e7alara b\u00f6lmek, \u00f6zellikle ilk y\u00fckleme s\u00fcresini iyile\u015ftirebilir. Vue CLI, dinamik * Tree Shaking (\u00d6l\u00fc Kod Eleme):<\/strong> Kullan\u0131lmayan kodlar\u0131 paketlerden atmak, dosya boyutunu azalt\u0131r. Webpack 4 ve sonras\u0131, Vue CLI, statik varl\u0131klar\u0131n (resimler, fontlar vb.) nas\u0131l i\u015flenece\u011fini kontrol etmek i\u00e7in * * Paket boyutlar\u0131n\u0131 g\u00f6rselle\u015ftirmek ve optimizasyon f\u0131rsatlar\u0131n\u0131 belirlemek i\u00e7in Bu plugin, Mevcut bir Loader’\u0131n Se\u00e7eneklerini De\u011fi\u015ftirme:<\/strong><\/p>\n \u00d6rne\u011fin, Yeni bir Loader Kural\u0131 Ekleme:<\/strong><\/p>\n \u00d6rne\u011fin, SVG dosyalar\u0131n\u0131 Vue bile\u015fenleri olarak i\u00e7e aktarmak i\u00e7in Bu \u00f6rnekte, \u00f6nce Vue CLI’nin varsay\u0131lan SVG i\u015fleme kural\u0131n\u0131 ( Plugin’leri ekleme, kald\u0131rma veya mevcut bir plugin’in se\u00e7eneklerini de\u011fi\u015ftirme:<\/p>\n Mevcut bir Plugin’in Se\u00e7eneklerini De\u011fi\u015ftirme:<\/strong><\/p>\n \u00d6rne\u011fin, Plugin Kald\u0131rma:<\/strong><\/p>\n \u00d6rne\u011fin, Vue CLI’nin varsay\u0131lan olarak ekledi\u011fi Webpack’in mod\u00fclleri nas\u0131l \u00e7\u00f6z\u00fcmledi\u011fini (resolve) kontrol eden ayarlar\u0131 de\u011fi\u015ftirebilirsiniz. Bu, \u00f6zellikle Bu \u00f6rnekte, TypeScript dosyalar\u0131n\u0131n da \u00e7\u00f6z\u00fcmlenmesini sa\u011fl\u0131yor, Webpack konfig\u00fcrasyonunu \u00f6zelle\u015ftirirken baz\u0131 yayg\u0131n sorunlarla kar\u015f\u0131la\u015fabilirsiniz.<\/p>\n * vue.config.js<\/code> dosyas\u0131 arac\u0131l\u0131\u011f\u0131yla bu ayarlar\u0131 nas\u0131l \u00f6zelle\u015ftirebilece\u011fimizi ad\u0131m ad\u0131m inceleyece\u011fiz. configureWebpack<\/code> ve chainWebpack<\/code> gibi y\u00f6ntemlerin farklar\u0131n\u0131 ve kullan\u0131m senaryolar\u0131n\u0131 ele alacak, s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131lan senaryolara y\u00f6nelik pratik \u00f6rnekler sunaca\u011f\u0131z. Amac\u0131m\u0131z, Vue geli\u015ftiricilerinin Webpack’e kar\u015f\u0131 duydu\u011fu “kara kutu” alg\u0131s\u0131n\u0131 ortadan kald\u0131rmak ve onlara projelerinin paketleme s\u00fcrecinde daha fazla kontrol ve anlay\u0131\u015f kazand\u0131rmakt\u0131r.<\/p>\nWebpack Nedir ve Neden Kullan\u0131l\u0131r? Temel Kavramlar<\/h3>\n
\n* Ba\u011f\u0131ml\u0131l\u0131k Y\u00f6netimi:<\/strong> Webpack, bir mod\u00fcl\u00fcn di\u011ferine olan ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 anlar ve bu ba\u011f\u0131ml\u0131l\u0131klar\u0131 do\u011fru s\u0131rada y\u00fckler. \u00d6rne\u011fin, bir JavaScript dosyas\u0131n\u0131n ba\u015fka bir JavaScript dosyas\u0131n\u0131 veya bir CSS dosyas\u0131n\u0131 i\u00e7e aktarmas\u0131 durumunda, Webpack bu ba\u011f\u0131ml\u0131l\u0131klar\u0131 \u00e7\u00f6zerek her \u015feyin do\u011fru \u015fekilde \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar.
\n* Transpilasyon ve D\u00f6n\u00fc\u015ft\u00fcrme:<\/strong> Modern JavaScript (ES6+), taray\u0131c\u0131 uyumlulu\u011fu sorunlar\u0131 nedeniyle do\u011frudan her taray\u0131c\u0131da \u00e7al\u0131\u015fmayabilir. Webpack, Babel gibi ara\u00e7larla entegre olarak, daha yeni JavaScript kodunu eski taray\u0131c\u0131lar\u0131n anlayabilece\u011fi ES5’e d\u00f6n\u00fc\u015ft\u00fcrebilir (transpile edebilir). Ayn\u0131 \u015fekilde, TypeScript, Sass, Less gibi dilleri de standart JavaScript ve CSS’e d\u00f6n\u00fc\u015ft\u00fcrebilir.
\n* Varl\u0131k Y\u00f6netimi (Asset Management):<\/strong> Sadece JavaScript ve CSS de\u011fil, g\u00f6rseller, fontlar ve di\u011fer statik varl\u0131klar da Webpack taraf\u0131ndan i\u015flenebilir. Bu varl\u0131klar genellikle optimize edilir, s\u0131k\u0131\u015ft\u0131r\u0131l\u0131r ve uygun dizinlere kopyalan\u0131r.<\/p>\nsrc\/main.js<\/code>).
\n* Output (\u00c7\u0131k\u0131\u015f Noktas\u0131):<\/strong> Webpack’in paketlenmi\u015f \u00e7\u0131kt\u0131 dosyalar\u0131n\u0131 nereye ve hangi isimle yerle\u015ftirece\u011fini belirtir. Genellikle dist<\/code> dizini ve bundle.js<\/code> gibi isimler kullan\u0131l\u0131r.
\n* Loaders (Y\u00fckleyiciler):<\/strong> Webpack varsay\u0131lan olarak yaln\u0131zca JavaScript ve JSON dosyalar\u0131n\u0131 anlar. Loader’lar, Webpack’e di\u011fer dosya t\u00fcrlerini (CSS, g\u00f6rseller, Vue bile\u015fenleri, TypeScript vb.) nas\u0131l i\u015fleyece\u011fini \u00f6\u011fretir. \u00d6rne\u011fin, vue-loader<\/code> Vue tek dosya bile\u015fenlerini i\u015flerken, css-loader<\/code> ve style-loader<\/code> CSS dosyalar\u0131n\u0131 i\u015fler.
\n* Plugins (Eklentiler):<\/strong> Loader’lar belirli mod\u00fcl t\u00fcrlerini d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in kullan\u0131l\u0131rken, Plugin’ler paketleme s\u00fcrecinin genelinde daha geni\u015f g\u00f6revleri yerine getirir. \u00d6rnek olarak, HtmlWebpackPlugin<\/code> HTML dosyas\u0131 olu\u015fturur, MiniCssExtractPlugin<\/code> CSS’i ayr\u0131 bir dosyaya \u00e7\u0131kar\u0131r ve DefinePlugin<\/code> global sabitler tan\u0131mlar.
\n* Mode (Mod):<\/strong> Webpack’in development<\/code>, production<\/code> veya none<\/code> modunda \u00e7al\u0131\u015f\u0131p \u00e7al\u0131\u015fmad\u0131\u011f\u0131n\u0131 belirtir. Her mod, farkl\u0131 optimizasyonlar ve varsay\u0131lan ayarlar getirir. production<\/code> modu, kodu otomatik olarak s\u0131k\u0131\u015ft\u0131r\u0131r ve daha performansl\u0131 \u00e7\u0131kt\u0131lar \u00fcretirken, development<\/code> modu daha h\u0131zl\u0131 derleme s\u00fcreleri ve hata ay\u0131klama kolayl\u0131klar\u0131 sunar.<\/p>\nVue CLI ve Webpack Entegrasyonu: Gizli Yap\u0131land\u0131rmay\u0131 Ke\u015ffetmek<\/h3>\n
vue create my-app<\/code>), CLI sizin i\u00e7in bir dizi varsay\u0131lan yap\u0131land\u0131rma ve ba\u011f\u0131ml\u0131l\u0131k kurar. Bu yap\u0131land\u0131rmalar\u0131n \u00f6nemli bir k\u0131sm\u0131, projenizin Webpack ile nas\u0131l derlenece\u011fini ve paketlenece\u011fini belirler.<\/p>\n@vue\/cli-service<\/code> Nedir?<\/h4>\n@vue\/cli-service<\/code> paketi bulunur. Bu paket, geli\u015ftirme sunucusu (dev server), derleme (build) komutlar\u0131 ve Webpack yap\u0131land\u0131rmas\u0131 gibi temel i\u015flevleri sa\u011flar. Bir Vue CLI projesinin package.json<\/code> dosyas\u0131na bakt\u0131\u011f\u0131n\u0131zda, scripts<\/code> b\u00f6l\u00fcm\u00fcnde genellikle \u015funlar\u0131 g\u00f6r\u00fcrs\u00fcn\u00fcz:<\/p>\n\"scripts\": {\n \"serve\": \"vue-cli-service serve\",\n \"build\": \"vue-cli-service build\",\n \"lint\": \"vue-cli-service lint\"\n}<\/code><\/pre>\nvue-cli-service<\/code> komutu, @vue\/cli-service<\/code> paketi taraf\u0131ndan sa\u011flanan i\u015flevleri \u00e7a\u011f\u0131r\u0131r. serve<\/code> komutu, uygulaman\u0131z\u0131 geli\u015ftirme modunda \u00e7al\u0131\u015ft\u0131ran bir geli\u015ftirme sunucusu ba\u015flat\u0131rken, build<\/code> komutu uygulaman\u0131z\u0131 \u00fcretim i\u00e7in optimize edilmi\u015f bir \u015fekilde derler. Bu komutlar\u0131n her ikisi de arka planda Webpack’i kullan\u0131r.<\/p>\nVarsay\u0131lan Webpack Konfig\u00fcrasyonu Nerede? (
webpack-chain<\/code> Kullan\u0131m\u0131)<\/h4>\nvue inspect > webpack.config.js<\/code><\/pre>\nwebpack.config.js<\/code> ad\u0131nda bir dosyaya yazd\u0131r\u0131r. Bu dosya, Vue CLI’nin dahili olarak olu\u015fturdu\u011fu tam Webpack konfig\u00fcrasyonunu i\u00e7erir ve olduk\u00e7a b\u00fcy\u00fck ve karma\u015f\u0131k olabilir. Bu komut, Vue CLI’nin dahili olarak Webpack’i nas\u0131l yap\u0131land\u0131rd\u0131\u011f\u0131n\u0131 anlamak i\u00e7in harika bir yoldur.<\/p>\nwebpack-chain<\/code> adl\u0131 bir k\u00fct\u00fcphane kullan\u0131r. webpack-chain<\/code>, Webpack yap\u0131land\u0131rmas\u0131n\u0131 zincirlenebilir (chainable) bir API arac\u0131l\u0131\u011f\u0131yla programatik olarak de\u011fi\u015ftirmeyi sa\u011flayan bir ara\u00e7t\u0131r. Bu, konfig\u00fcrasyon \u00fczerinde daha ince ve mod\u00fcler bir kontrol sa\u011flar. \u00d6rne\u011fin, bir loader’\u0131 veya bir plugini eklemek, de\u011fi\u015ftirmek veya kald\u0131rmak i\u00e7in do\u011frudan bir JavaScript nesnesini manip\u00fcle etmek yerine, webpack-chain<\/code>‘in y\u00f6ntemlerini kullan\u0131rs\u0131n\u0131z. Bu yakla\u015f\u0131m, birden fazla geli\u015ftiricinin ayn\u0131 Webpack konfig\u00fcrasyonunu farkl\u0131 \u015fekillerde \u00f6zelle\u015ftirmesi gerekti\u011finde \u00e7ak\u0131\u015fmalar\u0131 azaltmaya yard\u0131mc\u0131 olur.<\/p>\nvue.config.js<\/code> Dosyas\u0131: Konfig\u00fcrasyonunuzun Merkezi<\/h4>\nvue.config.js<\/code> adl\u0131 iste\u011fe ba\u011fl\u0131 bir dosya kullan\u0131r. Bu dosya, projenizin k\u00f6k dizininde bulunur ve CommonJS mod\u00fcl s\u00f6zdizimi kullan\u0131larak bir nesne veya fonksiyon d\u00f6nd\u00fcrmelidir.<\/p>\n\/\/ vue.config.js\nmodule.exports = {\n \/\/ Proje yap\u0131land\u0131rma se\u00e7enekleri buraya gelir\n};<\/code><\/pre>\nvue.config.js<\/code> dosyas\u0131, Vue CLI’nin dahili Webpack yap\u0131land\u0131rmas\u0131n\u0131 al\u0131r ve \u00fczerine sizin \u00f6zel ayarlar\u0131n\u0131z\u0131 ekler veya mevcut ayarlar\u0131 de\u011fi\u015ftirir. Bu, Webpack’in karma\u015f\u0131k do\u011fas\u0131yla do\u011frudan u\u011fra\u015fmadan, Vue CLI’nin sa\u011flad\u0131\u011f\u0131 y\u00fcksek seviyeli bir API arac\u0131l\u0131\u011f\u0131yla konfig\u00fcrasyonu y\u00f6netmenizi sa\u011flar. Bu dosya sadece Webpack ayarlar\u0131n\u0131 de\u011fil, ayn\u0131 zamanda geli\u015ftirme sunucusu ayarlar\u0131n\u0131, PWA (Progressive Web App) ayarlar\u0131n\u0131 ve di\u011fer Vue CLI ile ilgili ayarlar\u0131 da i\u00e7erir.<\/p>\nvue.config.js<\/code> ile Konfig\u00fcrasyonu Geni\u015fletmek: configureWebpack<\/code> vs. chainWebpack<\/code><\/h3>\nvue.config.js<\/code> dosyas\u0131, Vue CLI projenizin Webpack yap\u0131land\u0131rmas\u0131n\u0131 \u00f6zelle\u015ftirmek i\u00e7in iki ana y\u00f6ntem sunar: configureWebpack<\/code> ve chainWebpack<\/code>. Her ikisi de farkl\u0131 kullan\u0131m senaryolar\u0131na ve esneklik seviyelerine sahiptir.<\/p>\nconfigureWebpack<\/code> (Object veya Function)<\/h4>\nconfigureWebpack<\/code> se\u00e7ene\u011fi, Webpack yap\u0131land\u0131rma nesnesini do\u011frudan de\u011fi\u015ftirmek i\u00e7in kullan\u0131l\u0131r. Bu, daha basit ve do\u011frudan de\u011fi\u015fiklikler yapmak istedi\u011finizde kullan\u0131\u015fl\u0131d\u0131r.<\/p>\nconfigureWebpack<\/code>‘e bir Webpack yap\u0131land\u0131rma nesnesi atayabilirsiniz. Bu nesne, Vue CLI’nin dahili Webpack yap\u0131land\u0131rmas\u0131yla birle\u015ftirilir (merge edilir).<\/p>\n\/\/ vue.config.js\n module.exports = {\n configureWebpack: {\n resolve: {\n alias: {\n '@components': '@\/components' \/\/ Yeni bir alias ekle\n }\n },\n plugins: [\n \/\/ Yeni bir Webpack plugin'i ekle\n new MyCustomPlugin()\n ]\n }\n };<\/code><\/pre>\nconfigureWebpack<\/code>‘e bir fonksiyon atayabilirsiniz. Bu fonksiyon, Webpack yap\u0131land\u0131rma nesnesini arg\u00fcman olarak al\u0131r ve bu nesneyi do\u011frudan manip\u00fcle etmenize olanak tan\u0131r.<\/p>\n\/\/ vue.config.js\n module.exports = {\n configureWebpack: config => {\n if (process.env.NODE_ENV === 'production') {\n \/\/ \u00dcretim modunda belirli optimizasyonlar ekle\n config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;\n } else {\n \/\/ Geli\u015ftirme modunda farkl\u0131 ayarlar\n config.devtool = 'eval-source-map';\n }\n \/\/ Mevcut bir plugin'i bulup de\u011fi\u015ftirme \u00f6rne\u011fi\n const htmlPlugin = config.plugins.find(p => p.constructor.name === 'HtmlWebpackPlugin');\n if (htmlPlugin) {\n htmlPlugin.options.template = '.\/public\/index.html'; \/\/ Template yolunu de\u011fi\u015ftir\n }\n }\n };<\/code><\/pre>\nchainWebpack<\/code> (Daha Esnek, webpack-chain<\/code> API’si)<\/h4>\nchainWebpack<\/code> se\u00e7ene\u011fi, webpack-chain<\/code> k\u00fct\u00fcphanesinin sa\u011flad\u0131\u011f\u0131 API’yi kullanarak Webpack yap\u0131land\u0131rmas\u0131n\u0131 de\u011fi\u015ftirmek i\u00e7in tasarlanm\u0131\u015ft\u0131r. Bu y\u00f6ntem, configureWebpack<\/code>‘e g\u00f6re daha g\u00fc\u00e7l\u00fc ve daha g\u00fcvenli bir yakla\u015f\u0131md\u0131r, \u00e7\u00fcnk\u00fc do\u011frudan nesne manip\u00fclasyonu yerine zincirlenebilir bir API kullan\u0131r.<\/p>\nchainWebpack<\/code>, bir fonksiyon al\u0131r. Bu fonksiyon, webpack-chain<\/code>‘in Config<\/code> \u00f6rne\u011fini arg\u00fcman olarak al\u0131r ve bu \u00f6rnek \u00fczerinde zincirlenebilir y\u00f6ntemleri kullanarak yap\u0131land\u0131rmay\u0131 de\u011fi\u015ftirebilirsiniz.<\/p>\n\/\/ vue.config.js\nmodule.exports = {\n chainWebpack: config => {\n \/\/ Alias ekleme\n config.resolve.alias\n .set('@', path.resolve(__dirname, 'src'))\n .set('assets', '@\/assets');\n\n \/\/ Yeni bir loader kural\u0131 ekleme\n config.module\n .rule('images')\n .test(\/\\.(png|jpe?|gif|webp)(\\?.*)?$\/)\n .use('url-loader')\n .loader('url-loader')\n .options({\n limit: 4096,\n fallback: {\n loader: 'file-loader',\n options: {\n name: 'img\/[name].[hash:8].[ext]'\n }\n }\n });\n\n \/\/ Mevcut bir loader'\u0131 de\u011fi\u015ftirme (\u00f6rne\u011fin, vue-loader options)\n config.module\n .rule('vue')\n .use('vue-loader')\n .tap(options => {\n \/\/ options objesini de\u011fi\u015ftir\n options.compilerOptions = {\n whitespace: 'condense'\n };\n return options;\n });\n\n \/\/ Yeni bir plugin ekleme\n config\n .plugin('my-custom-plugin')\n .use(MyCustomPlugin, [{ optionA: 'value' }]);\n\n \/\/ Mevcut bir plugin'i kald\u0131rma\n config.plugins.delete('prefetch'); \/\/ Prefetch plugin'i kald\u0131r\n }\n};<\/code><\/pre>\nchainWebpack<\/code>‘in Avantajlar\u0131:<\/strong><\/p>\n
\n* G\u00fcvenlik:<\/strong> Do\u011frudan nesne manip\u00fclasyonu yerine API y\u00f6ntemleri kullan\u0131ld\u0131\u011f\u0131 i\u00e7in, Vue CLI g\u00fcncellemeleriyle daha uyumlu olma e\u011filimindedir.
\n* \u0130nce Tan\u0131ml\u0131 Kontrol:<\/strong> Loader’lar\u0131, plugin’leri, resolve ayarlar\u0131n\u0131 ve di\u011fer Webpack \u00f6zelliklerini eklemek, de\u011fi\u015ftirmek veya kald\u0131rmak i\u00e7in \u00e7ok daha ince ve spesifik kontrol sa\u011flar.<\/p>\nconfigureWebpack<\/code> (Object):<\/strong> \u00c7ok basit eklemeler veya varsay\u0131lan Webpack yap\u0131land\u0131rmas\u0131na do\u011frudan eklenmesini istedi\u011finiz yeni \u00f6zellikler i\u00e7in.
\n* configureWebpack<\/code> (Function):<\/strong> Webpack yap\u0131land\u0131rma nesnesini do\u011frudan manip\u00fcle etmeniz gerekti\u011finde, \u00f6zellikle ko\u015fullu de\u011fi\u015fiklikler veya mevcut plugin’leri bulup de\u011fi\u015ftirmek i\u00e7in. Ancak dikkatli kullan\u0131lmal\u0131d\u0131r.
\n* chainWebpack<\/code>:<\/strong> Webpack yap\u0131land\u0131rmas\u0131 \u00fczerinde daha ince ve kontroll\u00fc de\u011fi\u015fiklikler yapmak istedi\u011finizde, mevcut loader’lar\u0131 veya plugin’leri de\u011fi\u015ftirmek, yeni kurallar eklemek veya kald\u0131rmak i\u00e7in tercih edilen y\u00f6ntemdir. Genellikle daha g\u00fcvenli ve gelece\u011fe d\u00f6n\u00fck bir yakla\u015f\u0131md\u0131r.<\/p>\nchainWebpack<\/code> daha fazla esneklik ve kontrol sa\u011flad\u0131\u011f\u0131 i\u00e7in tercih edilen y\u00f6ntemdir.<\/p>\nS\u0131k\u00e7a Kullan\u0131lan
vue.config.js<\/code> Ayarlar\u0131 ve Senaryolar\u0131<\/h3>\nvue.config.js<\/code> dosyas\u0131n\u0131 kullanarak Webpack yap\u0131land\u0131rmas\u0131n\u0131 \u00f6zelle\u015ftirebilece\u011finiz bir\u00e7ok yayg\u0131n senaryo bulunmaktad\u0131r. \u0130\u015fte bunlardan baz\u0131lar\u0131:<\/p>\nOrtam De\u011fi\u015fkenleri Y\u00f6netimi<\/h4>\n
VUE_APP_<\/code> ile ba\u015flayan t\u00fcm ortam de\u011fi\u015fkenleri, Webpack’in DefinePlugin<\/code>‘i arac\u0131l\u0131\u011f\u0131yla uygulaman\u0131z\u0131n koduna enjekte edilir.<\/p>\n\/\/ .env.development\nVUE_APP_API_URL=http:\/\/localhost:3000\/api\n\n\/\/ .env.production\nVUE_APP_API_URL=https:\/\/api.myproductionapp.com\/api<\/code><\/pre>\nprocess.env.VUE_APP_API_URL<\/code> \u015feklinde eri\u015febilirsiniz. E\u011fer vue.config.js<\/code> i\u00e7inde \u00f6zel bir ortam de\u011fi\u015fkeni tan\u0131mlamak isterseniz:<\/p>\n\/\/ vue.config.js\nmodule.exports = {\n \/\/ ...\n chainWebpack: config => {\n config.plugin('define').tap(args => {\n args[0]['process.env.VUE_APP_CUSTOM_VAR'] = JSON.stringify('My Custom Value');\n return args;\n });\n }\n};<\/code><\/pre>\nPath Aliaslar\u0131 (Yol Takma Adlar\u0131)<\/h4>\n
@<\/code> alias\u0131n\u0131 src<\/code> dizinine i\u015faret eder.<\/p>\n\/\/ vue.config.js\nconst path = require('path');\n\nmodule.exports = {\n chainWebpack: config => {\n config.resolve.alias\n .set('@', path.resolve(__dirname, 'src')) \/\/ Varsay\u0131lan @ alias\u0131\n .set('assets', '@\/assets') \/\/ 'src\/assets' i\u00e7in 'assets' alias\u0131\n .set('components', '@\/components'); \/\/ 'src\/components' i\u00e7in 'components' alias\u0131\n }\n};<\/code><\/pre>\nimport MyComponent from 'components\/MyComponent.vue'<\/code> \u015feklinde i\u00e7e aktarma yapabilirsiniz.<\/p>\nLoader Ayarlar\u0131<\/h4>\n
\/\/ vue.config.js\nmodule.exports = {\n css: {\n loaderOptions: {\n scss: {\n \/\/ Sass de\u011fi\u015fkenlerini global olarak eklemek i\u00e7in\n additionalData: @import \"~@\/styles\/variables.scss\";<\/code>\n },\n sass: {\n \/\/ Ayn\u0131 \u015fekilde sass-loader i\u00e7in (indented syntax)\n additionalData: @import \"~@\/styles\/variables.sass\"<\/code>\n }\n }\n }\n};<\/code><\/pre>\npostcss.config.js<\/code> dosyas\u0131 olu\u015fturarak veya vue.config.js<\/code> i\u00e7inde css.loaderOptions.postcss<\/code> kullanarak PostCSS ayarlar\u0131n\u0131 yapabilirsiniz.<\/p>\n\/\/ vue.config.js\nmodule.exports = {\n css: {\n loaderOptions: {\n postcss: {\n plugins: [\n require('autoprefixer')(),\n require('postcss-preset-env')({\n stage: 3,\n features: {\n 'custom-properties': false\n }\n })\n ]\n }\n }\n }\n};<\/code><\/pre>\nPlugin Ayarlar\u0131<\/h4>\n
HtmlWebpackPlugin<\/code>, DefinePlugin<\/code> gibi bir\u00e7ok plugin’i dahili olarak kullan\u0131r.<\/p>\nHtmlWebpackPlugin<\/code>‘in varsay\u0131lan \u015fablonunu veya di\u011fer se\u00e7eneklerini de\u011fi\u015ftirmek:<\/p>\n\/\/ vue.config.js\nmodule.exports = {\n chainWebpack: config => {\n config\n .plugin('html')\n .tap(args => {\n args[0].title = 'My Custom Vue App Title';\n args[0].template = '.\/public\/custom-index.html'; \/\/ \u00d6zel HTML \u015fablonu\n return args;\n });\n }\n};<\/code><\/pre>\nCopyWebpackPlugin<\/code> ekleyerek belirli dosyalar\u0131 dist<\/code> klas\u00f6r\u00fcne kopyalamak:<\/p>\n\/\/ vue.config.js\nconst CopyWebpackPlugin = require('copy-webpack-plugin');\n\nmodule.exports = {\n chainWebpack: config => {\n config\n .plugin('copy-static-files')\n .use(CopyWebpackPlugin, [\n {\n patterns: [\n { from: 'src\/static', to: 'static' } \/\/ src\/static alt\u0131ndaki her \u015feyi dist\/static'e kopyala\n ]\n }\n ]);\n }\n};<\/code><\/pre>\nDev Server Ayarlar\u0131<\/h4>\n
devServer<\/code> anahtar\u0131 alt\u0131nda yap\u0131l\u0131r. Bu ayarlar, uygulaman\u0131z\u0131n geli\u015ftirme s\u0131ras\u0131nda nas\u0131l davrand\u0131\u011f\u0131n\u0131 kontrol eder.<\/p>\n\/\/ vue.config.js\nmodule.exports = {\n devServer: {\n port: 8081, \/\/ Varsay\u0131lan portu de\u011fi\u015ftir\n host: '0.0.0.0', \/\/ D\u0131\u015far\u0131dan eri\u015fime izin ver\n https: false, \/\/ HTTPS kullanma\n open: true, \/\/ Sunucu ba\u015flat\u0131ld\u0131\u011f\u0131nda taray\u0131c\u0131y\u0131 otomatik a\u00e7\n proxy: {\n \/\/ API isteklerini ba\u015fka bir sunucuya y\u00f6nlendir\n '\/api': {\n target: 'http:\/\/localhost:5000',\n ws: true,\n changeOrigin: true\n }\n }\n }\n};<\/code><\/pre>\nproxy<\/code> ayar\u0131, \u00f6zellikle \u00f6n y\u00fcz ve arka y\u00fcz geli\u015ftirme sunucular\u0131 farkl\u0131 portlarda \u00e7al\u0131\u015ft\u0131\u011f\u0131nda \u00e7ok kullan\u0131\u015fl\u0131d\u0131r. Taray\u0131c\u0131n\u0131n CORS (Cross-Origin Resource Sharing) k\u0131s\u0131tlamalar\u0131n\u0131 a\u015fmaya yard\u0131mc\u0131 olur.<\/p>\nPerformans Optimizasyonlar\u0131<\/h4>\n
import()<\/code> ifadeleriyle otomatik kod b\u00f6lme yapar.<\/p>\n\/\/ vue.config.js\n module.exports = {\n chainWebpack: config => {\n \/\/ Vendor kodunu ayr\u0131 bir pakete ay\u0131r\n config.optimization.splitChunks({\n chunks: 'all',\n cacheGroups: {\n vendors: {\n name: 'chunk-vendors',\n test: \/[\\\\\/]node_modules[\\\\\/]\/,\n priority: -10,\n chunks: 'initial'\n },\n common: {\n name: 'chunk-common',\n minChunks: 2,\n priority: -20,\n chunks: 'initial',\n reuseExistingChunk: true\n }\n }\n });\n }\n };<\/code><\/pre>\nproduction<\/code> modunda otomatik olarak tree shaking yapar. package.json<\/code> dosyan\u0131zda sideEffects: false<\/code> i\u015faretini ayarlayarak daha iyi sonu\u00e7lar elde edebilirsiniz.
\n* Minification (K\u00fc\u00e7\u00fcltme):<\/strong> Kodun bo\u015fluklar\u0131n\u0131, yorumlar\u0131n\u0131 ve gereksiz karakterlerini kald\u0131rarak dosya boyutunu azaltma. production<\/code> modunda otomatik olarak TerserPlugin<\/code> ile yap\u0131l\u0131r.
\n* Caching (\u00d6nbellekleme):<\/strong> Taray\u0131c\u0131lar\u0131n \u00f6nbellek mekanizmalar\u0131n\u0131 kullanarak, de\u011fi\u015fmeyen dosya par\u00e7alar\u0131n\u0131n tekrar indirilmesini engellemek. \u00c7\u0131k\u0131\u015f dosyalar\u0131na hash ekleyerek yap\u0131l\u0131r ([name].[hash:8].js<\/code>). Vue CLI bunu varsay\u0131lan olarak yapar.<\/p>\nStatik Dosyalar ve Asset Y\u00f6netimi<\/h4>\n
assetsDir<\/code> ve publicPath<\/code> gibi se\u00e7enekler sunar.<\/p>\npublicPath<\/code>:<\/strong> Uygulaman\u0131z\u0131n da\u011f\u0131t\u0131m\u0131nda statik varl\u0131klar\u0131n\u0131z\u0131n sunulaca\u011f\u0131 temel URL’yi belirler. CDN kullan\u0131yorsan\u0131z veya uygulaman\u0131z bir alt dizinden sunuluyorsa \u00f6nemlidir.<\/p>\n\/\/ vue.config.js\n module.exports = {\n publicPath: process.env.NODE_ENV === 'production'\n ? '\/my-production-app\/' \/\/ \u00dcretim i\u00e7in alt dizin\n : '\/' \/\/ Geli\u015ftirme i\u00e7in k\u00f6k dizin\n };<\/code><\/pre>\nassetsDir<\/code>:<\/strong> Derlenen statik varl\u0131klar\u0131n (JS, CSS, img) outputDir<\/code> (varsay\u0131lan dist<\/code>) i\u00e7indeki hangi dizine yerle\u015ftirilece\u011fini belirtir.<\/p>\n\/\/ vue.config.js\n module.exports = {\n assetsDir: 'static' \/\/ dist\/static alt\u0131nda varl\u0131klar\n };<\/code><\/pre>\nWebpack Bundle Analyzer<\/h4>\n
webpack-bundle-analyzer<\/code> eklentisi \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n\/\/ vue.config.js\nconst BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;\n\nmodule.exports = {\n chainWebpack: config => {\n if (process.env.NODE_ENV === 'production') {\n config\n .plugin('webpack-bundle-analyzer')\n .use(BundleAnalyzerPlugin, [{\n analyzerMode: 'static', \/\/ HTML raporu olu\u015ftur\n reportFilename: 'bundle-report.html',\n openAnalyzer: false \/\/ Otomatik a\u00e7ma\n }]);\n }\n }\n};<\/code><\/pre>\nnpm run build<\/code> komutunu \u00e7al\u0131\u015ft\u0131rd\u0131ktan sonra dist<\/code> dizininde bir HTML raporu olu\u015fturur ve uygulaman\u0131z\u0131n hangi mod\u00fcllerden olu\u015ftu\u011funu ve her birinin ne kadar yer kaplad\u0131\u011f\u0131n\u0131 g\u00f6sterir.<\/p>\nDerinlemesine
chainWebpack<\/code> Kullan\u0131m\u0131: Geli\u015fmi\u015f Senaryolar<\/h3>\nchainWebpack<\/code>‘in g\u00fcc\u00fc, Webpack yap\u0131land\u0131rmas\u0131n\u0131n her bir b\u00f6l\u00fcm\u00fcne eri\u015fim sa\u011flayabilmesinden gelir. Loader’lar\u0131, plugin’leri, resolver’lar\u0131 ve di\u011fer ayarlar\u0131 \u00e7ok detayl\u0131 bir \u015fekilde de\u011fi\u015ftirebilirsiniz.<\/p>\nLoader’lar\u0131 Y\u00f6netme<\/h4>\n
chainWebpack<\/code> ile mevcut bir loader’\u0131n se\u00e7eneklerini de\u011fi\u015ftirebilir, yeni bir loader ekleyebilir veya bir loader’\u0131 kald\u0131rabilirsiniz.<\/p>\nurl-loader<\/code>‘\u0131n limit<\/code> se\u00e7ene\u011fini de\u011fi\u015ftirmek:<\/p>\n\/\/ vue.config.js\nmodule.exports = {\n chainWebpack: config => {\n config.module\n .rule('images') \/\/ 'images' kural\u0131n\u0131 se\u00e7\n .use('url-loader') \/\/ 'url-loader'\u0131 se\u00e7\n .tap(options => {\n options.limit = 8192; \/\/ Limit'i 4096'dan 8192'ye \u00e7\u0131kar\n return options;\n });\n }\n};<\/code><\/pre>\nvue-svg-loader<\/code> eklemek:<\/p>\n\/\/ vue.config.js\nmodule.exports = {\n chainWebpack: config => {\n \/\/ Mevcut svg loader'\u0131n\u0131 kald\u0131r (Vue CLI'nin varsay\u0131lan\u0131n\u0131)\n config.module.rule('svg').uses.clear();\n\n \/\/ Yeni kural\u0131 ekle: SVG dosyalar\u0131n\u0131 Vue bile\u015fenleri olarak y\u00fckle\n config.module\n .rule('svg-vue')\n .test(\/\\.svg$\/)\n .use('vue-svg-loader')\n .loader('vue-svg-loader')\n .end()\n .use('svg-url-loader') \/\/ Veya svg-inline-loader\n .loader('svg-url-loader')\n .options({\n limit: 10 * 1024, \/\/ 10KB'den k\u00fc\u00e7\u00fck SVGlere data URI olarak g\u00f6m\n noquotes: true, \/\/ URL'leri t\u0131rnak i\u00e7ine alma\n });\n }\n};<\/code><\/pre>\nsvg<\/code> kural\u0131) temizliyoruz, ard\u0131ndan kendi \u00f6zel svg-vue<\/code> kural\u0131m\u0131z\u0131 ekleyerek SVG’leri Vue bile\u015fenleri olarak i\u015fliyoruz.<\/p>\nPlugin’leri Y\u00f6netme<\/h4>\n
DefinePlugin<\/code> taraf\u0131ndan tan\u0131mlanan process.env.BASE_URL<\/code> de\u011fi\u015fkenini de\u011fi\u015ftirmek:<\/p>\n\/\/ vue.config.js\nmodule.exports = {\n chainWebpack: config => {\n config\n .plugin('define')\n .tap(args => {\n \/\/ BASE_URL'i \u00f6zel bir de\u011ferle de\u011fi\u015ftir\n args[0]['process.env'].BASE_URL = JSON.stringify('\/my-custom-base\/');\n return args;\n });\n }\n};<\/code><\/pre>\nPreloadPlugin<\/code> ve PrefetchPlugin<\/code>‘i kald\u0131rmak (baz\u0131 durumlarda istenmeyebilir):<\/p>\n\/\/ vue.config.js\nmodule.exports = {\n chainWebpack: config => {\n config.plugins.delete('preload');\n config.plugins.delete('prefetch');\n }\n};<\/code><\/pre>\nResolve Ayarlar\u0131n\u0131 De\u011fi\u015ftirme<\/h4>\n
node_modules<\/code> d\u0131\u015f\u0131ndaki dizinlerdeki mod\u00fclleri i\u00e7e aktar\u0131rken kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n\/\/ vue.config.js\nmodule.exports = {\n chainWebpack: config => {\n config.resolve\n .extensions \/\/ \u00c7\u00f6z\u00fcmlenecek dosya uzant\u0131lar\u0131n\u0131 ekle\n .add('.ts')\n .add('.tsx')\n .end()\n .modules \/\/ Mod\u00fcl arama dizinlerini ekle\n .add('src\/shared') \/\/ 'src\/shared' dizinini mod\u00fcl olarak ara\n .end()\n .alias \/\/ Aliaslar\u0131 ayarla\n .set('~', path.resolve(__dirname, 'src\/utils'));\n }\n};<\/code><\/pre>\nsrc\/shared<\/code> dizinini mod\u00fcl arama yollar\u0131na ekliyor ve ~<\/code> alias\u0131n\u0131 src\/utils<\/code>‘a ayarl\u0131yoruz.<\/p>\nS\u0131k Kar\u015f\u0131la\u015f\u0131lan Sorunlar ve \u00c7\u00f6z\u00fcmleri<\/h3>\n