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ıç