İçeriğe geç

Etiket: webpack

Webpack katili Parcel nedir ?

Neden parcel ?

 

Günümüzde web uygulamaları için geniş özelliklere sahip birçok demetleyici bulunmaktadır, bunların en çok kullanılanları webpack ve browserify da dahil.

Bir çok demetleyici konfigurasyon ve eklentiler ile kurulur ve sadece birşeylerin çalışması için 500 satırdan fazla satır sayısı olan konfigurasyon doslayarı genellikle var olan şeyler. Bu konfigurasyonlar sadece sıkıcı ve zaman harcayan şeyler değil ayrıca her uygulama için çoğaltmak ve doğru ayarı yapmak da zor. Sıklıkla ürün kısmına geçmede alt optimizasyonların gerektiği bir hal alabiliyor. Parcel sıfır configurasyon ayarı olacak şekilde tasarlanmıştır. SAdece giriş noktanızı belirtmeniz yeterli o geri kalanı doğru bir şekilde yapacaktır.

Var olan demetleyicilerin bir olumsuz yanı da çok yavaş olmalarıdır. Geliştirme sürecinde fazlaca değişiklierin yapılması çok fazla bağımlılığı ve fazla dosyaların olduğu büyük uygulamalarda demetleme sürecinin dakikalar alması acı verici bir durumdur. Parcel modern çok çekirdekli işlemcilerden yaralanarak kodunuzu paralel işlemlerle derler. Sonuç olarak ilk demetlemede büyük bir hız artışı olur. Ayrıca her dosya için dosya sistemi önbelleğine sahiptir, böylece ileriki başlangıçlarda da hızlıdır.

Sonuç olarak var olan demetleyiciler string yükleyiciler/dönüştürücüler üzerine kurulmuştur. Bir stringi alırlar parse ederler bazı dönüşümlerden eçirerek tekrar kod üretirler.Bu da bir dosya için fazla sayıdadönüşüm ve kod üretme anlamına gelir, pek etkili bir yol değildir bunu aksine Parcel her dosya için bir kere parse eder, birçok kez dönüşüm uygular ve birçok dönüşümden geçirerek bir defa kod üretir.

 

Yükelemek için :

yarn global add parcel-bundler

Başlangıç noktası göstermek için :

parcel index.html

Bu kadar artık geliştirme işlemine başlayabiliriz.

 

Ana sayfası: https://parceljs.org/

Github sayfası: https://github.com/parcel-bundler/parcel

Kullanımı video:

 

 

Webpack nedir?

Webpack benim de yeni kullanmaya başladığım tarayıcı tarafında yazılım geliştirikenkaranlıkta kalan çoğu yerleri aydınlatan bir paket.

Webpack aslında es6 ile npm paketleri kullanarak yazdığımız projelerde bize paketlenmiş tek bir .js çıktısı veren bir araçtır. Ayrıca dışarıdan eklediğimiz resimler, dosyalar da dahil bize hepsini güzelce derleyip toplayarak çıktı verir.

Hatta es6 ve Commonjs combine olsada bize toplayıp verebiliyor Ayrıca tarayıcınızın desteklemediği şeyleri de çevirebilir.

Şimdi webpack kurulumuna başlayalım:

Önce babel gereksinimlerimi kuralım:
npm install babel-cli babel-preset-es2015 --save-dev
npm install babel-core --save-dev
npm install babel-loader --save -dev

veya

yarn add babel-core -dev
yarn add babel-loader -dev

.babel.rc dosyamızı ayarlayalım:

{
"presets": ["es2015"]
}
webpack ve webpack-cli paketlerimizi yükleyelim:
npm install webpack webpack-cli --save-dev

veya

yarn add webpack webpack-cli --dev

html pluginimizi yükleyelim bu sayede derlediğimizde index.html dosyasınıda oluşturacak tek yapmamız gereken o dosyayı açmak olacak:

npm install --save-dev html-webpack-plugin
yarn add html-webpack-plugin --dev

şimdi

webpack.config.js dosyamızı ayarlayalım:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},

//bazı durumlarda bir dosya çok büyük boyutlarda olduğu için bizden ayırmamızı
// istiyor performans açısından problem olmaması için o zaman aşağıdaki şekilde
// düzenlememiz gerekir:
entry: {
index:"./src/index.js",
ikinci: "./src/ikinci.js",
ücüncü: "./src/ucuncu.js"
},

mode: 'development', // ürünü bitirdiğimizde production ayarı ile bundle ediyoruz şimdilik development modunda

//babel loaderimizi ekleyelim:

module:{
rules:[
{
test: /\.js$/,
exclude: /(node_modules | bower_components)/,
use:{
loader: "babel-loader",
options:{
presets:['es2015']
}
},
}
]
},

output: {
filename:[name]bundle.js,
path: path.resolve(__dist, 'dist'),
//publicPath:'/' // bu kısım htaccses ayarı ile .js dosyalarının kaynağını belirtmek için kullanabilirsiniz
},

plugins:[
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({ title: "Output Managment"}) // bu kısım html sayfamızın tittlesini ayarlıyor.
]

};

Buraya kadar olan kısımla package.json dosyamıza :

"scripts": {
"wb": "webpack"
}

diyerek konsoldan

npm run wb

dediğimizde bize bundlemizi vermiş olacak.

webpack-dev-server kuralumu yapalım:

Şimdi bir de geliştirme sürecinde sürekli bundle etmemek için webpack-dev-server kurmamız gerekiyor böylece her değişiklikiği kaydettiğimizde bir localhost un bir portundan değişikliğimizle sayfamız sürekli yenilenecek.

npm install webpack-dev-server --save-dev
yarn add webpack-dev-server -dev

daha sonra webpack.config.js dosyamıza plugins ten sonra ayarlarımız ekleyelim

devServer:{
contentBase: parh.join(__dirname, "build")
compress: true,
port: 9000,
//index: "index.html" // html dosyanızın yolunu verebilirsiniz.
}

şimdi tekrar package.json dosyamızda scripts kısmına komutumuzu ekleyelim

"scripts": {
"wb": "webpack",
"wd": "webpack-dev-server"
}

komut satırına npm run wd yazdığımızda projemiz localhost:9000/ de bize sunulmuş olarak karşımıza çıkacak.
publicpath kısmını değiştirerek başka yollarda verebilirsiniz o zaman localhost:9000/ilkdeneme gibi linkler elde edebilirsiniz. Benim anlatacaklarım şimdilik bu kadar daha ayrıntılı bakmak isterseniz webpackin sitesinden dökümanlarını inceleyebilirsiniz.

 

Not: yukarıdaki işlemler:

"webpack": "^4.4.1",
"webpack-cli": "^2.0.13",
"webpack-dev-server": "^3.1.1"
"babel-loader": "^7.1.4"
"babel-core": "^6.26"

sürümleri ile gerçekleştirilmiştir.

Bu kadar anlatımdan sonra sizler için:

 
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.19",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.19.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.8"
  }

özelliklere sahip ayarlanmış bir webpack projesi hazırladım  sadece başlangıç için. Sadece css ve img kullnamak isterseniz onlar için loaderleri ayarlamanız gerekiyor. İki adet config var biri develpment, biri build için. WEbpack Proje Başlangıç