Introducere

Bine, așa că presupun că ați auzit de webpack - de aceea sunteți aici, nu? Adevărata întrebare este ce știi despre asta? S-ar putea să știți câteva lucruri despre asta, cum ar fi cum funcționează, sau s-ar putea să nu aveți absolut niciun indiciu. Oricum ar fi, vă pot asigura că, după ce ați citit acest articol, probabil că vă veți simți suficient de confortabil cu întreaga situație webpack .

La urma urmei - necesitatea este mama invenției ...

Un mod perfect de a spune de ce există webpack este citatul de mai sus. Dar, pentru a o înțelege mai bine, trebuie să ne întoarcem, înapoi, până când JavaScript nu era noul lucru sexy, în acele vremuri vechi, când un site web era doar un mic pachet de vechi bun . html, CSS și probabil unul sau câteva fișiere JavaScript în unele cazuri. Dar foarte curând toate acestea aveau să se schimbe.

Care a fost problema?

Întreaga comunitate de dezvoltatori a fost implicată într-o căutare constantă de îmbunătățire a experienței generale a utilizatorilor și dezvoltatorilor în ceea ce privește utilizarea și construirea de aplicații web / javascript. Prin urmare, am văzut o mulțime de biblioteci și cadre noiintrodus.

Câteva modele de proiectare au evoluat de-a lungul timpului pentru a oferi dezvoltatorilor un mod mai bun, mai puternic, dar foarte simplu de a scrie aplicații JavaScript complexe. Site-urile web nu mai erau doar un mic pachet cu un număr impar de fișiere. Ei au declarat că devin voluminoși, odată cu introducerea modulelor JavaScript , deoarece scrierea unor bucăți mici de cod încapsulate a fost noua tendință. În cele din urmă, toate acestea au condus la o situație în care aveam 4x sau 5x he de fișiere în pachetul general de aplicații.

Nu numai că dimensiunea generală a aplicației a fost o provocare, dar a existat și un decalaj uriaș în ceea ce privește tipul de cod pe care îl scriu dezvoltatorii de coduri și tipul browserelor de coduri pe care le-au putut înțelege. Dezvoltatorii au trebuit să folosească o mulțime de coduri de asistență numite polifilluri pentru a se asigura că browserele au putut interpreta codul din pachetele lor.

Pentru a răspunde la aceste probleme, a fost creat webpack. Webpack este un pachet de module static.

Deci, cum a fost răspunsul Webpack?

Pe scurt, Webpack trece prin pachetul dvs. și creează ceea ce el numește un grafic de dependență care constă din diferite module pe care aplicația dvs. web ar trebui să funcționeze conform așteptărilor. Apoi, în funcție de acest grafic, creează un nou pachet care constă din numărul minim foarte mic de fișiere necesare, adesea doar un singur fișier bundle.js care poate fi conectat cu ușurință la fișierul html și utilizat pentru aplicație.

În următoarea parte a acestui articol, vă voi conduce prin configurarea pas cu pas a webpack-ului. Până la sfârșitul acestuia, sper să înțelegeți noțiunile de bază ale Webpack. Deci, haideți să obținem acest rol ...

Ce construim?

Probabil ați auzit de ReactJS. Dacă știți reactJS, probabil știți ce este create-react-app . Pentru aceia dintre voi care habar nu au care sunt aceste două lucruri, ReactJS este o bibliotecă UI care este foarte utilă în construirea unor UI complexe inteligente, iar create-react-app este un instrument CLIpentru configurarea sau bootstrapping o configurare dev dev boilerplate pentru a face aplicații React.

Astăzi vom crea o aplicație simplă React, dar fără a utiliza CLI create-react-app. Sper că ți se pare suficient de distractiv. :)

Faza de instalare

npm int

Așa este, așa încep aproape toate lucrurile bune: inițial npm simplu. Voi folosi VS Code, dar nu ezitați să utilizați orice editor de coduri care vă place pentru a începe lucrurile.

Înainte de a putea face oricare dintre aceste lucruri, gândiți-vă, asigurați-vă că aveți cele mai recente nodeJS și versiunea npm instalate local pe computer. Faceți clic pe fiecare dintre aceste linkuri pentru a afla mai multe despre proces.

$ npm init

Aceasta va crea un pachet de pornire și va adăuga un fișier package.json pentru noi. Aici vor fi menționate toate dependențele necesare pentru a construi această aplicație.

Acum, pentru a crea o aplicație simplă React, avem nevoie de două biblioteci principale: React și ReactDOM. Deci, haideți să le adăugăm ca dependențe în aplicația noastră folosind npm.

$ npm i react react-dom --save

În continuare, trebuie să adăugăm webpack, astfel încât să putem grupa aplicația noastră împreună. Nu numai pachet, dar vom solicita, de asemenea, reîncărcarea la cald, care este posibilă utilizând serverul webpack dev.

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

Este --save--devsă specificați că aceste module sunt doar dependențe de dev. Acum, din moment ce lucrăm cu React, trebuie să ținem cont de faptul că React folosește clasele ES6 și instrucțiunile de import, lucru pe care toate browserele nu le pot înțelege. Pentru a ne asigura că codul este lizibil de toate browserele, avem nevoie de un instrument precum babel pentru a transpile codul nostru în codul normal lizibil pentru browsere.

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

Ei bine, ce să spun, acesta a fost numărul maxim de instalări pe care le promit. În cazul babel, am încărcat mai întâi biblioteca de bază babel, apoi încărcătorul și, în cele din urmă, 2 pluginuri sau presetări pentru a funcționa în mod special cu React și cu toate noile coduri ES2015 și ES6.

Mai departe, să adăugăm un cod și să începem configurarea webpack.

Acesta este modul în care fișierul package.json ar trebui să aibă grijă de toate instalările de până acum. Este posibil să aveți un număr de versiune diferit în funcție de momentul în care urmăriți acest articol.

Codul

Să începem prin adăugarea unui fișier webpack.config.js în rădăcina structurii aplicației noastre. Adăugați următorul cod în fișierul 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' }) ]}

Bine, deci hai să înțelegem liniile de mai sus.

În primul rând, începem prin a solicita modulului de cale implicit pentru a accesa locația fișierului și a face modificări la locația fișierului.

În continuare, avem nevoie de HTMLWebpackPlugin pentru a genera un fișier HTML care să fie utilizat pentru difuzarea fișierelor / fișierelor JavaScript incluse. Citiți mai multe despre HTMLWebpackPlugin făcând clic pe link.

Apoi avem obiectul export.module cu câteva proprietăți în ele. Primul este proprietatea de intrare,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