React 18 & Webpack 5

Merhabalar,

Genellikle boilerplate yada starter-kit’ler ile oluşturulan projelerde karşılaştığımız craco (create-react-app-configuration-override) veya eject attığımız bir create-react-app uygulamasındaki webpack-config dosyasını hazırdan öğrenmek güç olduğundan dolayı bugün sıfırdan webpack ile react projesi kurulumunu anlatmaya karar verdim. Proje içerisinde build için bir aşama bulunmamaktadır fakat Terser gibi pluginleri inceleyerek minify, build ve optimizasyon için buraya gözatabilirsiniz.

Webpack’e Başlangıç

İlk adımda webpack-demo klasörünü oluşturarak aşağıdaki klasör yapısını ve içinde ileride gerekicek dosyaları oluşturalım. Github üzerinden projeye direk ulaşabilirsiniz.

[webpack-demo]
-.babelrc
-package.json
-webpack.config.js
--[src]
----app.js
----index.html
----index.js
----style.css
----styled.js

Sonrasında package.json içerisinde aşağıdaki gibi proje adını, main scripti ve start command’ı ile webpack dev komutunu ekliyelim. Şimdi paketleri kurmaya başlayabiliriz.

{
     "name": "webpack-demo",
     "main": "index.js",
     "scripts": {
           "start": "webpack-dev-server"
     }
}

Dikkat! Paketlerin versiyonlarına göre webpack’te varolan parametreler değişiklik gösterebilir. Örneğin webpack4'teki kural yapıları ile webpack5 tamamen farklı bir yapıya dönüştü. Aşağıdaki paketleri aynı versiyonlarda kurmanız gerekmektedir, github linki üzerinden bulabilirsiniz. Babel yerine swc daha hızlı, ama daha genel bir anlatım için Babel ile ilerledim.

"devDependencies": {
    "@babel/core": "^7.7.4",
    "@babel/preset-env": "^7.7.4",
    "@babel/preset-react": "^7.7.4",
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "babel-cli": "^6.26.0",
    "babel-loader": "^8.0.6",
    "css-loader": "^6.7.1",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.6.0",
    "postcss-loader": "^7.0.0",
    "react-transform-hmr": "^1.0.4",
    "webpack": "^5.72.1",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.9.0"
},
"dependencies": {
    "react": "^18.1.0",
    "react-dom": "^18.1.0"
}

Html Webpack Plugin

Webpack ile birlikte Html Webpack Plugin’in kurulumu ile paketleri yüklemeye başlayalım. Webpack tarafından oluşturulan tüm bundle’lar, yeni bir index.html dosyası oluşturularak içerisine inject edilmesini sağlar.

npm i --save -D webpack webpack-cli webpack-dev-server html-webpack-plugin

Mini Css Extract Plugin & Css Loader

CSS (.css), SCSS (.scss) veya TS (.ts) gibi diğer kaynakları kullanmak istediğimizde birçok paket öncelikli olarak loader’lar karşınıza çıkacaktır. Bu süreçte destek webpack için loader’lar ile sağlanır. Mini Css Extract Plugin Loader’lar webpack için belirtilen kaynakların compile ve/veya transform edilmesi işlemlerini yürüten ve bundle edilebilen JavaScript modülleridirinden birisidir. Birbiriyle bağımlılığı olduklarından dolayı css-loader ve postcss-loader ile yanında kurmamız gerekmektedir.

npm i --save -D mini-css-extract-plugin css-loader postcss-loader

React Transform Hot Module Reloader

HMR ile IDE üzerinde herhangi bir değişiklik yapıldığında otomatik olarak browser’a (DOM’a) yansımasını sağlayan bir paket ile devam edelim. Bunun için aynı zamanda Babel kurulumu yapmamız gerekiyor. Kurulum sonrasında .babelrc dosyasına babel ile çalıştıracağınız paketleri eklemeniz gerekmektedir.

npm i --save -D react-transform-hmr @babel/core @babel/preset-env @babel/preset-react babel-cli babel-loader

React & React DOM

Burayı hızlıca geçiyorum React ile ReactDOM kurulumu için aşağıdaki komutu çalıştırıyoruz.

npm i --save react react-dom

EXTRA! Styled Component

Styled component ile Webpack’te oluşan babel-loader pre-processini azaltmak için ve genellikle kullandığım için bu paketi seçtim.

npm i --save @emotion/react @emotion/styled

Webpack Config

Tüm yüklediğimiz bu paketleri webpack config üzerinde çalıştırmamız için aşağıdaki gibi sırasıyla export edilerek tanımlama yapmamız gerekmektedir. Github linkine ulaşarak src klasörü içerisindeki diğer dosyalara ulaşabilirsiniz.

// File System
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    entry: path.join(__dirname, 'src'),
    mode: 'development',
output: {
    path: path.join(__dirname, 'bundle'),
    filename: 'bundle.js'
},
// Hot Reload Module
devServer: {
    static: 'src',
    hot: true,
},
module: {
    rules: [
    // Babel Loader
    {
        loader: 'babel-loader',
        test: /\.js$/,
        exclude: /node_modules/
    },
    {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"]
   },
],},
plugins: [
     new MiniCssExtractPlugin(),
     // ! Html Dosyası
     new HTMLWebpackPlugin({ 
          title: "Webpack Demo", 
          template: 'src/index.html'}
)]};

ReactDOM ve React kurulumu

Id'si ‘webpack-demo’ olan bir div oluşturarak index.html'i kaydetmemiz gerekiyor. rootElement değişkenini render ediceğimiz fonksiyonu çağırarak işlemi bitiriyoruz.

import React from 'react';
import {createRoot} from 'react-dom/client';
import App from './app';
import './style.css';

const rootElement = document.getElementById('webpack-demo');

const root = createRoot(rootElement);
root.render(<App />);

Umarım faydalı olmuştur, kendim araştırırken eski kullandığım css loaderları yüklemek yerine MiniCssExtractPlugin gibi yeni bir plugin öğrendim. Bu kısımdan sonra kullanılcağınız yeni pluginler için ve webpack hakkında daha fazlasını araştırmak için buradan başlayabilirsiniz.