Webpack'e giriş: nedir ve nasıl kullanılır?

Giriş

Tamam, sanırım webpack'i duymuşsunuzdur - bu yüzden buradasınız, değil mi? Asıl soru, bunun hakkında ne bildiğiniz? Nasıl çalıştığı gibi onunla ilgili birkaç şey biliyor olabilirsiniz veya kesinlikle hiçbir fikriniz olmayabilir. Her iki durumda da, sizi temin ederim ki bu makaleyi okuduktan sonra, tüm web paketi durumunda kendinizi yeterince rahat hissedeceksiniz .

Sonuçta - zorunluluk , buluşun anasıdır ...

Web paketinin neden var olduğunu söylemenin mükemmel bir yolu yukarıdaki alıntıdır. Ancak bunu daha iyi anlamak için, JavaScript'in yeni seksi şey olmadığı zamanlara, bir web sitesinin sadece küçük bir eski zaman paketinden ibaret olduğu o eski çağlara geri dönmemiz gerekiyor . html, CSS ve muhtemelen bazı durumlarda bir veya birkaç JavaScript dosyası. Ama çok geçmeden bunların hepsi değişecekti.

Problem neydi?

Tüm geliştirici topluluğu, javascript / web uygulamalarını kullanma ve oluşturma konusunda genel kullanıcı ve geliştirici deneyimini iyileştirmek için sürekli bir arayış içindeydi. Bu nedenle, birçok yeni kitaplık ve çerçeve gördüktanıtıldı.

Geliştiricilere karmaşık JavaScript uygulamaları yazmak için daha iyi, daha güçlü ancak çok basit bir yol sağlamak için zaman içinde birkaç tasarım deseni de gelişti. Daha önceleri web siteleri artık içinde tek sayıda dosya bulunan küçük bir paket değildi. JavaScript modüllerinin tanıtılmasıyla birlikte, kapsüllenmiş küçük kod parçaları yazmak yeni trend olduğundan , hantal hale geldiklerini belirttiler . Sonunda tüm bunlar, genel uygulama paketinde 4x veya 5x dosya bulundurduğumuz bir duruma yol açar.

Yalnızca uygulamanın genel boyutu bir zorluk değildi, aynı zamanda geliştiricilerin yazdığı kod türü ve tarayıcıların anlayabileceği türden kodlar arasında da büyük bir boşluk vardı. Geliştiriciler , tarayıcıların paketlerindeki kodu yorumlayabildiklerinden emin olmak için polyfills adı verilen çok sayıda yardımcı kod kullanmak zorunda kaldı .

Bu sorunları yanıtlamak için web paketi oluşturuldu. Webpack, statik bir modül paketleyicidir.

Peki yanıt Webpack nasıldı?

Kısaca, Webpack, paketinizden geçer ve web uygulamanızın beklendiği gibi çalışması gereken çeşitli modüllerden oluşan bir bağımlılık grafiği olarak adlandırdığı şeyi oluşturur . Daha sonra, bu grafiğe bağlı olarak, gereken minimum sayıda dosyadan oluşan yeni bir paket oluşturur, genellikle html dosyasına kolayca takılabilen ve uygulama için kullanılabilen tek bir bundle.js dosyası.

Bu makalenin bir sonraki bölümünde, sizi adım adım web paketi kurulumuna götüreceğim. Sonunda, umarım Webpack'in temellerini anlamışsınızdır. Öyleyse hadi başlayalım ...

Ne inşa ediyoruz?

Muhtemelen ReactJS'yi duymuşsunuzdur. React JS'yi biliyorsanız, uygulama oluşturma-tepki verme nedir biliyorsunuzdur . Bu iki şeyden birinin ne olduğu hakkında hiçbir fikri olmayanlarınız için, ReactJS, akıllı karmaşık kullanıcı arayüzleri oluşturmada çok yardımcı olan bir kullanıcı arayüzü kitaplığıdır ve uygulama oluşturma-tepki verme bir CLI aracıdır.React uygulamaları yapmak için bir standart geliştirici kurulumunu kurmak veya başlatmak için.

Bugün basit bir React uygulaması oluşturacağız, ancak create-react-app CLI'yi kullanmayacağız. Umarım bu size yeterince eğlenceli geliyordur. :)

Kurulum Aşaması

npm int

Doğru, neredeyse tüm iyi şeyler böyle başlar: sade eski npm init. VS Code kullanacağım, ancak işleri başlatmak için istediğiniz herhangi bir kod düzenleyiciyi kullanmaktan çekinmeyin.

Bunlardan herhangi birini yapmadan önce, makinenizde yerel olarak en son nodeJS ve npm sürümünün kurulu olduğundan emin olun. Süreç hakkında daha fazla bilgi edinmek için bu bağlantıların her birine tıklayın.

$ npm init

Bu bir başlangıç ​​paketi oluşturacak ve bizim için bir package.json dosyası ekleyecektir. Bu uygulamayı oluşturmak için gereken tüm bağımlılıklardan bahsedileceği yer burasıdır.

Şimdi basit bir React uygulaması oluşturmak için iki ana kitaplığa ihtiyacımız var: React ve ReactDOM. Öyleyse npm kullanarak onları bağımlılıklar olarak uygulamamıza ekleyelim.

$ npm i react react-dom --save

Ardından, uygulamamızı birlikte paketleyebilmemiz için web paketi eklememiz gerekiyor. Sadece paket değil, aynı zamanda web paketi geliştirici sunucusunu kullanarak mümkün olan çalışırken yeniden yüklemeye de ihtiyacımız olacak.

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

Bu --save--dev, bu modüllerin yalnızca dev bağımlılıkları olduğunu belirtmektir. Şimdi React ile çalıştığımız için, React'in ES6 sınıflarını ve içe aktarma ifadelerini kullandığını unutmamalıyız, bu, tüm tarayıcıların anlayamayacağı bir şey olabilir. Kodun tüm tarayıcılar tarafından okunabilir olduğundan emin olmak için, kodumuzu tarayıcılar için normal okunabilir koda dönüştürmek için babel gibi bir araca ihtiyacımız var.

$ npm i babel-core babel-loader @babel/preset-react @babel/preset-env html-webpack-plugin --save-dev

Peki ne diyebilirim, söz verdiğim maksimum yükleme sayısı buydu. Babel söz konusu olduğunda, önce temel babel kitaplığını, ardından yükleyiciyi ve son olarak özellikle React ve tüm yeni ES2015 ve ES6 sonraki kodlarla çalışmak için 2 eklenti veya ön ayarı yükledik.

Devam edelim, biraz kod ekleyelim ve web paketi yapılandırmasını başlatalım.

Package.json dosyasının şimdiye kadarki tüm kurulumlardan sonra nasıl görünmesi gerektiği budur. Bu makaleyi ne zaman takip ettiğinize bağlı olarak farklı bir sürüm numarasına sahip olabilirsiniz.

Kod

Uygulama yapımızın köküne bir webpack.config.js dosyası ekleyerek başlayalım . Aşağıdaki kodu webpack.config dosyanıza ekleyin.

const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = { //This property defines where the application starts entry:'./src/index.js',
 //This property defines the file path and the file name which will be used for deploying the bundled file output:{ path: path.join(__dirname, '/dist'), filename: 'bundle.js' },
 //Setup loaders module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader' } } ] },
// Setup plugin to use a HTML file for serving bundled js files plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ]}

Tamam o halde yukarıdaki satırları anlayalım.

Öncelikle dosya konumuna erişmesi ve dosya konumunda değişiklikler yapması için varsayılan yol modülünü zorunlu kılarak başlıyoruz.

Daha sonra, HTMLWebpackPlugin'in, paketlenmiş JavaScript dosyası / dosyalarını sunmak için kullanılacak bir HTML dosyası oluşturmasını istiyoruz. Bağlantıyı tıklayarak HTMLWebpackPlugin hakkında daha fazla bilgi edinin.

Ardından, içinde bazı özelliklerin bulunduğu export.module nesnesine sahibiz. İlki, giriş mülküdür,which is used to specify which file webpack should start with to get the internal dependency graph created.

module.exports = {
 entry:'./src/index.js'
}

Next up is the output property specifying where the bundled file should be generated and what the name of the bundled file would be. This is done by the output.path and output.filename properties.

module.exports = {
//This property defines the file path and the file name which will be used for deploying the bundled file output:{ path: path.join(__dirname, '/dist'), filename: 'bundle.js' },
}

Next up are the loaders. This is to specify what webpack should do for a specific type for file. Remember that webpack out of box only understands JavaScript and JSON, but if your project has any other language used, this would be the place to specify what to do with that new language.

module.exports = {
//Setup loaders module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader' } } ] }
}

The information should be specified in an object for each module property, which further has an array of rules. There will be an object for every case. I have also specified to exclude everything in my node_modules folder.

Next up is the plugin property. This is used to extend the capabilities of webpack. Before a plugin can be used in the plugin array inside the module exports object, we need to require the same.

module.exports = {
// Setup plugin to use a HTML file for serving bundled js files plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ]
}

This particular plugin, as explained earlier, will use the specified file in our src folder. It’ll then use that as a template for our HTML file where all the bundled files will be automatically injected. There are a lot of other out of the box plugins that we could use — checkout the official page for more information.

The last thing we need to do is create a .babelrc file to use the babel preset we installed and take care of the ES6 classes and import statements in our code. Add the following lines of code to the .babelrc file.

{ "presets": ["env", "react"]}

And just like that, now babel will be able to use those presets. Okay so enough of the setup — let’s add some React code to see how this works.

React Code

Since the starting point for the application is the index.js file in src folder, let’s start with that. We will start by requiring both React and ReactDOM for our use in this case. Add the below code in your index.js file.

import React from 'react';import ReactDOM from 'react-dom';import App from './Components/App';
ReactDOM.render(, document.getElementById('app'));

So we simply import another file from our components folder, which you will create, and add another file in the folder called App.js. So let’s see what’s inside the App.js file:

import React, { Component } from 'react'
class App extends Component { render() { return ( 

Webpack + React setup

) }}
export default App;

We are almost done. The only thing left now is to enable hot reloading. This means that every time a change is detected, the browser auto reloads the page and has the ability to build and bundle the entire application when the time comes.

We can do this by adding script values in the package.json file. Remove the test property in the scripts object of your package.json file and add these two scripts:

"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"

You are all set! Go to your terminal, navigate to the root folder, and run npm start. It should start a dev server on your computer and serve the HTML file in your browser. If you make any minor/major changes and save the code, your browser will be automatically refreshed to show the latest set of changes.

Once you think you are ready to get the app bundled, you just need to hit the command, npm build, and webpack will create an optimised bundle in your project folder which can be deployed on any web server.

Conclusion

This is just a small application or use case of webpack and babel, but the applications are limitless. I hope you are excited enough to explore more options and ways of doing things with webpack and babel. Please refer to their official websites to know more and read in depth.

I have created a Github repo with all the code in it, so please refer to it incase of any questions.

ashishcodes4/webpack-react-setup

Setting a react application from scratch without using CLI - ashishcodes4/webpack-react-setupgithub.com

My two cents about webpack? Well, at times you may think that it’s nothing more than a tool, and why should you bother too much for a tool? But trust me when I say this: the initial struggle while learning your way around webpack will save you an enormous number of hours you would otherwise invest developing without webpack.

That’s all for now, hope to be back with yet another interesting article very soon. I hope you have enjoyed reading this one!

In case you face any difficulty or issues while following any of the above mentioned steps/processes, please feel free to get in touch and leave comments.

LinkedIn: //www.linkedin.com/in/ashish-nandan-singh-490987130/

Twitter: //twitter.com/ashishnandansin