Uvod u Webpack: što je to i kako ga koristiti

Uvod

Ok, pretpostavljam da ste čuli za webpack - zato ste ovdje, zar ne? Pravo je pitanje što o tome znate? Možda znate nekoliko stvari o tome, poput toga kako to funkcionira, ili možda nemate pojma. U svakom slučaju, mogu vas uvjeriti da ćete se nakon čitanja ovog članka vjerojatno osjećati ugodno u cijeloj situaciji s webpackom .

Napokon - nužnost je majka izuma ...

Savršeni način da se kaže zašto webpack postoji jest gornji citat. No, da bismo to bolje razumjeli, moramo se vratiti unatrag, u ono vrijeme kad JavaScript nije bio nova seksi stvar, u ona stara vremenska doba kada je web stranica bila samo mali snop dobrog starog . html, CSS i u nekim slučajevima vjerojatno jednu ili nekoliko JavaScript datoteka. Ali vrlo brzo sve će se to promijeniti.

U cemu je bio problem?

Čitava razvojna zajednica bila je uključena u stalnu potragu za poboljšanjem ukupnog korisničkog i razvojnog iskustva oko upotrebe i izrade javascript / web aplikacija. Stoga smo vidjeli puno novih knjižnica i okvirauveo.

Nekoliko obrazaca dizajna također se razvilo s vremenom kako bi programerima pružilo bolji, moćniji, ali vrlo jednostavan način pisanja složenih JavaScript aplikacija. Web stranice prije nisu bile samo mali paket u kojem je bio neparan broj datoteka. Izjavili su kako je glomazno uvođenje JavaScript modula , jer je pisanje enkapsuliranih malih dijelova koda novi trend. Na kraju sve to dovodi do situacije da smo u ukupnom paketu aplikacija imali 4x ili 5x hejta datoteka.

Ne samo da je cjelokupna veličina aplikacije bila izazov, već je postojala i velika praznina u vrsti koda koji su programeri pisali i koju vrstu preglednika koda mogu razumjeti. Programeri su morali koristiti puno pomoćnog koda zvanog polyfills kako bi bili sigurni da preglednici mogu interpretirati kôd u svojim paketima.

Da bi se odgovorilo na ove probleme, stvoren je webpack. Webpack je statički paket modula.

Pa, kako je Webpack bio odgovor?

Ukratko, Webpack prolazi kroz vaš paket i stvara ono što naziva grafom ovisnosti koji se sastoji od različitih modula koji bi vašem web programu trebali funkcionirati kako se očekuje. Zatim, ovisno o ovom grafikonu, kreira novi paket koji se sastoji od vrlo minimalnog broja potrebnih datoteka, često samo jedne datoteke bundle.js koja se lako može priključiti u html datoteku i koristiti za aplikaciju.

Tijekom sljedećeg dijela ovog članka provest ću vas kroz korak po korak postavljanja webpacka. Na kraju, nadam se da razumijete osnove Webpacka. Pa hajde da se pokrenemo ...

Što gradimo?

Vjerojatno ste čuli za ReactJS. Ako znate reakcijuJS, vjerojatno znate što je aplikacija za stvaranje-reagiranje . Za one od vas koji nemate pojma što je od te dvije stvari, ReactJS je UI knjižnica koja je vrlo korisna u izgradnji inteligentnih složenih korisničkih sučelja, a create-React-app je CLI alatza postavljanje ili pokretanje postavljanja programskog uzorka za izradu React aplikacija.

Danas ćemo stvoriti jednostavnu React aplikaciju, ali bez korištenja CLI za kreiranje-reagiranje aplikacije. Nadam se da vam ovo zvuči dovoljno zabavno. :)

Faza instalacije

npm int

Točno, tako počinju gotovo sve dobre stvari: obični stari npm init. Koristit ću VS Code, ali slobodno upotrijebite bilo koji uređivač koda koji želite da pokrenete stvari.

Prije nego što možete učiniti bilo što od ovoga, pomislite, provjerite imate li najnoviji nodeJS i npm verziju instaliranu lokalno na vašem stroju. Kliknite svaku od tih poveznica da biste saznali više o procesu.

$ npm init

To će stvoriti početni paket i dodati datoteku package.json za nas. Tu će se spomenuti sve ovisnosti potrebne za izgradnju ove aplikacije.

Sada za stvaranje jednostavne React aplikacije trebamo dvije glavne knjižnice: React i ReactDOM. Pa neka ih dodaju kao ovisnosti u našu aplikaciju pomoću npm.

$ npm i react react-dom --save

Dalje moramo dodati webpack, kako bismo mogli povezati našu aplikaciju. Ne samo paket, već ćemo trebati i vruće ponovno učitavanje koje je moguće pomoću webpack dev poslužitelja.

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

Treba --save--devodrediti da su ovi moduli samo razvojne ovisnosti. Budući da radimo s Reactom, moramo imati na umu da React koristi ES6 klase i naredbe za uvoz, nešto što svi preglednici možda neće moći razumjeti. Da bismo bili sigurni da kôd mogu čitati svi preglednici, potreban nam je alat kao što je babel za prevođenje našeg koda u uobičajeni čitljivi kôd za preglednike.

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

Pa što da kažem, to je maksimalan broj instalacija koje obećavam. U slučaju babela, prvo smo učitali osnovnu biblioteku babela, zatim loader i na kraju 2 dodatka ili unaprijed postavljene postavke za specifičan rad s Reactom i svim novim ES2015 i ES6 dalje kodom.

Krenimo dalje, dodajte malo koda i započnimo s konfiguracijom webpacka.

Tako bi datoteka package.json trebala brinuti o svim dosadašnjim instalacijama. Možda imate drugačiji broj verzije, ovisno o tome kada pratite ovaj članak.

Kod

Počnimo s dodavanjem datoteke webpack.config.js u korijen naše aplikacijske strukture. Dodajte sljedeći kod u datoteku webpack.config.

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' }) ]}

Dobro, hajde da razumijemo gornje retke.

Prvo započinjemo zahtijevajući zadani modul staze za pristup mjestu datoteke i unošenje promjena u mjesto datoteke.

Dalje tražimo da HTMLWebpackPlugin generira HTML datoteku koja će se koristiti za posluživanje združenih JavaScript datoteka / datoteka. Pročitajte više o HTMLWebpackPlugin klikom na vezu.

Tada imamo objekt export.module s nekim svojstvima. Prvo je ulazno svojstvo,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