Webpack5 ile React Projesi Oluşturmak
Merhabalar ,React ile proje oluştururken create-react-app ile oluşturmak kolay görünse de bazı özelleştirmeler yapmak istediğimizde esneklik düşmektedir. Bu gibi durumlar için webpack ve babel kullanılarak istenildiği kadar özelleştirme yapılabilmektedir.
Öncelikle boş bir proje oluşturalım.
mkdir webpack-demo
cd webpack-demo
npm init -yArdından sırasıyla webpack,webpack-cli,webpack-dev-server’ devDepend olarak kuralım.
npm install --save-dev webpack webpack-cli webpack-dev-serverŞimdi webpack.config.js adında bir dosya oluşturalım
const path = require('path');module.exports = {mode: 'development',entry: path.resolve(__dirname, "./src/index.jsx"),output: {path: path.resolve(__dirname, 'dist'),filename: 'main.bundle.js'},}
webpack.config.js dosyamızın ilk olarak içeriği yukarıdaki gibi geliştirici modunda (development) entry noktamız (bulundugumuz yol,src/index.jsx) build alındığında ise output olarak dist klasörü oluşturup bundlemızın adını main.bundle.js olarak belirteceğimizi söyledik.
Projemizde index.html dosyamızı oluşturmadan önce;
npm install --save-dev html-webpack-pluginyukarıdaki eklentiyi devDepend olarak ekliyoruz,ilgili paketi yükledikten sonra webpack.config.js aşağıdaki gibi olacaktır.
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = {mode: 'development',entry: path.resolve(__dirname, "./src/index.jsx"),output: {path: path.resolve(__dirname, 'dist'),filename: 'main.bundle.js'},
plugins: [
new HtmlWebpackPlugin({ title: "Webpack & React App", template: path.resolve(__dirname, './src/index.html') })
]}
pluginslere eklemiş olduğumuz ilk eklentimizi dahil edip , parametre olarak html sayfamızın başlığını ve kullanacağı html dosyamızın yolunu belirtiyoruz.
HtmlWebpackPlugin hakkında daha fazla bilgiyi github adresi üzerinden öğrenebilirsiniz.
src/index.html dosyamızı oluşturalım.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
</head>
<body>
<div id="root">
</div>
</body>
</html>Görüldüğü gibi title webpack ile birlikte yürütülmektedir.
Şimdi sırada babel eklentilerimizi kuralım.Babeljs kısaca es6 kodlarımızı es5 e çeviren bir araçtır detaylı bilgiyi kendi sayfasını ziyaret ederek bulabilirsiniz.
npm install --save-dev babel-loader @babel/core
npm install @babel/preset-env --save-dev
npm install --save-dev @babel/preset-reactilgili kurulumları tamamladıktan sonra proje dizininde babel.config.js dosyamızı oluşturalım ve içerisine aşağıdakileri ekleyelim.
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
}Şimdi sayfamızdaki css dosyaları için aşağıdaki paketleri devDepen olarak kuralım.
npm install --save-dev css-loader
npm install --save-dev sass-loader (sass scss için kullanmıyorsanız eklemeniz )
npm install --save-dev style-loaderİlgili paketler kurulduktan sonra webpack.config.js dosyamızı açalım ve tanımlamalarımızı yapalım.
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {mode: 'development',entry: path.resolve(__dirname, "./src/index.jsx"),output: {path: path.resolve(__dirname, 'dist'),filename: 'main.bundle.js'},module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.s[ac]ss$/i,
use: [
'style-loader',
{
loader: "css-loader",
options: {
modules: true,
importLoaders: 1
}
},
'sass-loader',
],
},
]
},
plugins: [
new HtmlWebpackPlugin({ title: "Webpack & React App", template: path.resolve(__dirname, './src/index.html') })
]}
Projemizde bulunan js veya jsx uzantılı dosyalarımızı babel ile ele alacağımızı bunları ele alırken node_modules klasörünün dahil olmayacağını belirttik,aynı şekilde css dosyalarımızı da style loader,css loader,scss yada sass kullanıyorsak sas-loader ile ele alacağımızı css’i modüler olarak kullanmak istediğimizi de ek parametre olarak belirttik.
Şimdi projemizin asıl bağımlılıklarını yüklemeden önce(React) biraz daha webpack configi yapalım. Öncelikle projeyi build aldıktan sonra dist klasörünün içerisinde alakasız başka bir dosya görmek istemediğim için
npm install --save-dev clean-webpack-plugineklentisi kuruyorum, daha sonra webpack.config.js de şu işlemleri yapıp webpack.config.js dosyası ile işimizi bitiriyoruz.
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
mode: 'development',
entry: path.resolve(__dirname, "./src/index.jsx"),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.bundle.js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.s[ac]ss$/i,
use: [
'style-loader',
{
loader: "css-loader",
options: {
modules: true,
importLoaders: 1
}
},
'sass-loader',
],
}
]
},
resolve: {
extensions: [".js", ".jsx", ".json"],
alias: {
Utilities: path.resolve(__dirname, 'src/utils/'),
}
},
devtool: "eval-cheap-module-source-map",
plugins: [
new CleanWebpackPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.ProgressPlugin(),
new HtmlWebpackPlugin({ title: "MerhabaApp", template: path.resolve(__dirname, './src/index.html') })
],
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000,
open: true,
hot: true,
historyApiFallback: true
},
};Öncelikle resolve diyerek dosyalarımı import ederken (js,jsx,json …) sonundaki uzantılara ihtiyacım olmayacağını belirtiyorum bunu webpack bizim yerimize halledecek aynı şekilde proje içerisinde kullanacak olmuş olduğum src/utils.js adlı dosyayı bütün dosyalardan aynı şekilde erişmek için yani kısacası (../../utils/index || ../../../utils/index) kurtulmak için Utilities alias’ı altında topladım ve hangi dosyadan erişmek istersem isteyeyim import Utils from “Utilities” şeklinde ulaşacağımı belirttim, daha sonra debug mod için source-map’i ayarladım. Pluginlere az önce eklemiş olduğum paketi ve hot reload için gerekli pluginleri ekledim. Daha sonra devServer için portumu,kodu sıkıştırıp sıkıştırmayacağını browseri açıp açmayacağını gibi özellikleri belirttim ve webpack.config.js dosyamı kapadım.
Webpack hakkında daha detaylı bilgi için buraya tıklayabilirsiniz.
Şimdi sırada projemizin asıl bağımlılıklarını yükleyelim.
npm install --save react
npm install --save react-domsrc/index.jsx dosyamızı oluşturalım.
import React from "react"
import ReactDOM from "react-dom"
const App = () => {
return (
<div>
Selam App.js
</div>
)
}
ReactDOM.render(<App/>,document.getElementById('root'))Son olarak package.json dosyamıza npm scriptlerimizi yazalım.
"scripts": {
"build": "webpack",
"dev": "webpack serve --config webpack.config.js"
},proje buildinin webpack tarafından ele alınacağını belirttikten sonra dev kısmında webpack dev serverin ele alacağını hangi config dosyasını kullanacağınıda belirttikten sonra artık npm run dev diyerek react projemizi başarılı bir şekilde çalıştırabiliriz.
Herkese İyi Çalışmalar Dilerim.
