Ardelon/webpack

JavaScript

Webpack Konfigürasyon

Kurulum

package.json dosyası yoksa terminale

npm init -y

Ardından webpack'in kendisini ve komutla çalıştırabilmek için webpack-cli kütüphanelerini indiriyoruz. Bu kütüphanelere paketleme esnasında ihtiyacımız olduğu için devDependency olarak yüklememiz yeterli.

npm i --save-dev webpack webpack-cli

Eğer webpack-dev-server kütüphanesini de önden yüklemek isterseniz onu da ekleyebilirsiniz.

npm i --save-dev webpack webpack-cli webpack-dev-server

// Veya

npm i --save-dev webpack-dev-server

package.json dosyasında scripts özelliğinin içine çalıştıracağımız komut adı ve içeriğini yazarak terminalden webpack'i kullanabiliriz

"scripts": {
	"run": "webpack"
},

Bu adımlardan sonra webpack kullanıma hazır durumda olmalı. Tabi bu haliyle default konfigürasyon olduğu için kök dizinde bulunan src klasörü içinde index.js dosyanız yoksa webpack derleme yaparken hata fırlatacaktır.

Konfigürasyon Listesi

Konfigürasyon Açıklamaları

webpack konfigürasyon dosyası belirleme

Config File;

package.json

"scripts": {
	"selectConfigFile": "webpack -c config/selectConfigFile.config.js"
},

terminal

npm run-script selectConfigFile

Flag / Alias	Type	Description
`--config, -c`	string[]	webpack konfigürasyon dosyasının adresini belirtmek için kullanılır

Konfigürasyon Listesine Geri Dön

webpack CLI ile mode belirleme

Config File;

mode seçeneği production, development veya none değeri alabilir. mode özelliğini webpack-cli ile belirlemek mümkündür.

package.json

"scripts": {
	"selectModeCLI": "webpack --mode=development -c config/selectModeCLI.config.js"
},

terminal

npm run-script selectModeCLI

Flag / Alias	Type	Description
`--mode`	string[]	Paketlemenin hangi ortamda kullanılacağını belirtir.

Konfigürasyon Listesine Geri Dön

webpack Konfigürasyon ile mode belirleme

Config File;

mode seçeneği production, development veya none değeri alabilir. mode özelliğini konfigürasyon dosyasında mode anahtar kelimesiyle string değeri olarak belirleyebiliriz.

package.json

"scripts": {
	"selectModeConfig": -c config/selectModeConfig.config.js"
},

terminal

npm run-script selectModeConfig

Flag / Alias	Type	Description
`--mode`	string[]	Paketlemenin hangi ortamda kullanılacağını belirtir.

Konfigürasyon Listesine Geri Dön

webpack mode seçimine göre farklı klasörlere çıktı alma

Config File;

package.json

"scripts": {
	"diffOutputWithArg": "webpack mode=development -c config/diffOutputWithArg.config.js"
},

terminal

npm run-script diffOutputWithArg

Flag / Alias	Type	Description
`--mode`	string[]	Paketlemenin hangi ortamda kullanılacağını belirtir.

Konfigürasyon Listesine Geri Dön

webpack birden fazla entry noktasından tek çıktı alma

Config File;

entry özelliğine array halinde dosya adresleri vererek bunları tek bir çıktıda birleştirmek mümkündür.

package.json

"scripts": {
	"multipleEntryOneOutput": "webpack  -c config/multipleEntryOneOutput.config.js"
},

terminal

npm run-script multipleEntryOneOutput

Konfigürasyon Listesine Geri Dön

webpack çıktısının adını belirleme

Config File;

output özelliğinin filename özelliğine değer atayarak dosya çıktı dosyasının ismini değiştirmemiz mümkündür.

package.json

"scripts": {
	"selectOutputName": "webpack -c config/selectOutputName.config.js"
},

terminal

npm run-script selectOutputName

Konfigürasyon Listesine Geri Dön

webpack birden fazla entry noktasından birden fazla çıktı alma

Config File;

Giriş noktalarını entry parametresine obje halinde verdiğimizde ve output parametresinide '[name].js' olarak girersek, objedeki anahtar kelimeler dosya adı, değerleri de derlenecek dosyaları ifade eder.

package.json

"scripts": {
  "multipleEntryMultipleOutput": "webpack -c config/multipleEntryMultipleOutput.config.js"
},

terminal

npm run-script multipleEntryMultipleOutput

Konfigürasyon Listesine Geri Dön

webpack çıktı isimlerini hash'leme

Config File;

Konfigürasyonda output özelliğinin filename özelliğine '[hash]' ekleyerek dosyaları hash'lemek mümkündür. Dosyalarda bir değişiklik olursa farklı hash üreteceği için tarayıcıda dosyanın güncellenmemesi durumu oluşmayacaktır. Derlediğiniz dosyada değişiklik yapıp tekrar derlerseniz farklı bir dosyanın üretildiğini görebilirsiniz.

package.json

"scripts": {
  "hashOutput": "webpack -c config/hashOutput.config.js"
},

terminal

npm run-script hashOutput

Konfigürasyon Listesine Geri Dön

webpack dependOn kullanma

Config File;

HTML dosyasına sırasıyla ekleyerek kullanabiliriz.

  <script src="./lodashVendor.js"></script>
  <script src="./app.js"></script>

package.json

"scripts": {
  "libraryDepend": "webpack -c config/libraryDepend.config.js"
},

terminal

npm run-script libraryDepend

Konfigürasyon Listesine Geri Dön

webpack ortak kütüphaneyi konfigürasyonda ekleme

Config File;

HTML dosyasına sırasıyla ekleyerek kullanabiliriz.

  <script src="./lodashVendor.js"></script>
  <script src="./app.js"></script>
  <script src="./appTwo.js"></script>

package.json

"scripts": {
  "libraryShared": "webpack -c config/libraryShared.config.js"
},

terminal

npm run-script libraryShared

Konfigürasyon Listesine Geri Dön

webpack runtime belirleme

Config File;

HTML dosyasına sırasıyla ekleyerek kullanabiliriz.

  <script src="./vendor.js"></script>
  <script src="./lodashVendor.js"></script>
  <script src="./app.js"></script>

package.json

"scripts": {
  "entryRuntime": "webpack -c config/entryRuntime.config.js"
},

terminal

npm run-script entryRuntime

Konfigürasyon Listesine Geri Dön

webpack CSS dosyası yükleme

Config File;

terminal

npm install --save-dev style-loader css-loader

package.json

"scripts": {
	"loadCSS": "webpack -c config/loadCSS.config.js"
},

terminal

npm run-script loadCSS

Konfigürasyon Listesine Geri Dön

webpack sass dosyası yükleme

Config File;

terminal

npm install --save-dev style-loader css-loader

package.json

"scripts": {
	"loadSass": "webpack -c config/loadSass.config.js"
},

terminal

npm run-script loadCSS

Konfigürasyon Listesine Geri Dön

webpack resim dosyası yükleme

Config File;

package.json

"scripts": {
	"loadFile": "webpack -c config/loadFile.config.js"
},

terminal

npm run-script loadFile

Konfigürasyon Listesine Geri Dön

webpack resim dosyalarını JavaScript çıktı dosyasında kullanma

Config File;

package.json

"scripts": {
	"loadFileInlineJS": "webpack -c config/loadFileInlineJS.config.js"
},

terminal

npm run-script loadFileInlineJS

Konfigürasyon Listesine Geri Dön

webpack resim dosyalarını dışa aktarma

Config File;

package.json

"scripts": {
	"loadFileResource": "webpack -c config/loadFileResource.config.js"
},

terminal

npm run-script loadFileResource

Konfigürasyon Listesine Geri Dön

webpack resim çıktısını klasöre aktarma

Config File;

terminal

package.json

"scripts": {
	"exportedFilePath": "webpack -c config/exportedFilePath.config.js"
},

terminal

npm run-script exportedFilePath

Konfigürasyon Listesine Geri Dön

webpack resim dosyalarını dosya tipine göre farklı yerlere çıktı alma

Config File;

terminal

package.json

"scripts": {
	"exportedFilePath": "webpack -c config/exportDiffAssettoDiffPlace.config.js"
},

terminal

npm run-script exportDiffAssettoDiffPlace

Konfigürasyon Listesine Geri Dön

webpack çıktı alınacak klasörü temizleme

Config File;

terminal

package.json

"scripts": {
	"cleanOutput": "webpack -c config/cleanOutput.config.js"
},

terminal

npm run-script cleanOutput

Konfigürasyon Listesine Geri Dön

webpack dev server kurma

Config File;

terminal

npm i webpack-dev-server --save-dev

package.json

"scripts": {
	"setupWebpackDevServer": "webpack serve -c config/setupWebpackDevServer.config.js"
},

terminal

npm run-script setupWebpackDevServer

Konfigürasyon Listesine Geri Dön

webpack dev server SSL

Config File;

package.json

"scripts": {
	"webpackDevServerSSL": "webpack serve -c config/webpackDevServerSSL.config.js"
},

terminal

npm run-script webpackDevServerSSL

Konfigürasyon Listesine Geri Dön

webpack dev server Headers

Config File;

package.json

"scripts": {
	"webpackDevServerHeaders": "webpack serve -c config/webpackDevServerHeaders.config.js"
},

terminal

npm run-script webpackDevServerHeaders

Konfigürasyon Listesine Geri Dön

webpack dev server Compress

Config File;

package.json

"scripts": {
	"webpackDevServerCompress": "webpack serve -c config/webpackDevServerCompress.config.js"
},

terminal

npm run-script webpackDevServerCompress

Konfigürasyon Listesine Geri Dön

webpack dev server Servis Edilen Dosyayı Açma

Config File;

package.json

"scripts": {
	"webpackDevServerOpenPage": "webpack serve -c config/webpackDevServerOpenPage.config.js"
},

terminal

npm run-script webpackDevServerOpenPage

Konfigürasyon Listesine Geri Dön

HTML Webpack Plugin Kurma

Config File;

terminal

npm i html-webpack-plugin --save-dev

package.json

"scripts": {
	"HTMLWebpackPluginSetup": "webpack -c config/HTMLWebpackPluginSetup.config.js"
},

terminal

npm run-script HTMLWebpackPluginSetup

Konfigürasyon Listesine Geri Dön

webpack HTML taslağı kullanma

Config File;

package.json

"scripts": {
	"HTMLWebpackPluginTemplate": "webpack -c config/HTMLWebpackPluginTemplate.config.js"
},

terminal

npm run-script HTMLWebpackPluginTemplate

Konfigürasyon Listesine Geri Dön

webpack birden fazla HTML dosyası üretme

Config File;

package.json

"scripts": {
	"HTMLWebpackPluginMultipleFileCreation": "webpack -c config/HTMLWebpackPluginMultipleFileCreation.config.js"
},

terminal

npm run-script HTMLWebpackPluginMultipleFileCreation

Konfigürasyon Listesine Geri Dön

webpack HTML taslağına plugin parametreleri gönderme

Config File;

package.json

"scripts": {
	"HTMLWebpackPluginOptionParameters": "webpack -c config/HTMLWebpackPluginOptionParameters.config.js"
},

terminal

npm run-script HTMLWebpackPluginOptionParameters

Konfigürasyon Listesine Geri Dön

webpack HTML taslağına harici parametre gönderme

Config File;

package.json

"scripts": {
	"HTMLWebpackPluginAdditionalParameters": "webpack -c config/HTMLWebpackPluginAdditionalParameters.config.js"
},

terminal

npm run-script HTMLWebpackPluginAdditionalParameters

Konfigürasyon Listesine Geri Dön

webpack çıktısını minimize etme

Config File;

package.json`

"scripts": {
	"minimizeOutput": "webpack -c config/minimizeOutput.config.js"
},

terminal

npm run-script minimizeOutput

Konfigürasyon Listesine Geri Dön

webpack çıktıdan console komutlarını temizleme

Config File;

package.json

"scripts": {
	"clearConsole": "webpack -c config/clearConsole.config.js"
},

terminal

npm run-script clearConsole

Konfigürasyon Listesine Geri Dön

webpack watch Files

Konfigürasyon Listesine Geri Dön

webpack dev server hot reload

Konfigürasyon Listesine Geri Dön

webpack dev server proxy

Konfigürasyon Listesine Geri Dön

webpack cache

Konfigürasyon Listesine Geri Dön

webpack çıktısını parçalara bölme

Config File;

package.json

"scripts": {
	"splitChunks": "webpack -c config/splitChunks.config.js"
},

terminal

npm run-script splitChunks

Konfigürasyon Listesine Geri Dön