Bevezetés a Webpack-ba: mi ez és hogyan kell használni

Bevezetés

Oké, tehát feltételezem, hogy hallottál már a webpackról - ezért vagy itt, igaz? Az igazi kérdés az, hogy mit tudsz róla? Lehet, hogy tudsz róla néhány dolgot, például hogyan működik, vagy egyáltalán nincs fogalmad. Akárhogy is, biztosíthatom Önöket arról, hogy a cikk elolvasása után valószínűleg elég jól fogja érezni magát az egész webpack helyzetben .

Végül is - a szükség a találmány anyja ...

A fenti idézet tökéletes módja annak, hogy miért létezik webpack. Ahhoz azonban, hogy jobban megértsük, vissza kell térnünk arra az időre, amikor a JavaScript nem volt az új szexi dolog, azokban a régi időkben, amikor a weboldal csak egy kis jó öreg csomag volt . html, CSS, és valószínűleg egy vagy néhány JavaScript fájl bizonyos esetekben. De nagyon hamar mindez megváltozni fog.

Mi volt a gond?

Az egész fejlesztői közösség folyamatosan részt vett a javascript / webes alkalmazások használatával és építésével kapcsolatos felhasználói és fejlesztői tapasztalatok javításában. Ezért rengeteg új könyvtárat és keretet láttunkbemutatott.

Néhány tervezési minta is fejlődött az idők folyamán, hogy a fejlesztők jobb, erőteljesebb, ugyanakkor nagyon egyszerű módon írják a bonyolult JavaScript alkalmazásokat. A korábbi webhelyek már nem csak egy kis csomag voltak, amelyekben páratlan számú fájl volt. Azt állították, hogy a JavaScript-modulok bevezetésével egyre terjedelmesebbé válnak, mivel a kapszulázott kis kóddarabok írása az új trend. Végül mindez olyan helyzethez vezet, amikor 4x vagy 5x fájl volt a teljes alkalmazáscsomagban.

Nemcsak az alkalmazás teljes mérete jelentett kihívást, hanem óriási hiányosságok mutatkoztak abban is, hogy milyen típusú kódokat írtak a fejlesztők, és milyen típusú kódböngészők érthették meg őket. A fejlesztőknek sok segítő kódot kellett használniuk, amit polyfill-eknek hívtak , hogy megbizonyosodjanak arról, hogy a böngészők képesek-e értelmezni a csomagjaikban található kódot.

E kérdések megválaszolására webcsomagot hoztak létre. A Webpack egy statikus modulcsomagoló.

Tehát hogyan válaszolt a Webpack?

Röviden: a Webpack végigmegy a csomagon, és létrehoz egy függőségi grafikont, amelyet különféle modulokból áll, amelyekre a webalkalmazásnak a várt módon kell működnie. Ezután ettől a diagramtól függően létrehoz egy új csomagot, amely a minimálisan szükséges fájlok minimális számából áll, gyakran csak egyetlen bundle.js fájlból, amelyet egyszerűen be lehet illeszteni a html fájlba és felhasználni az alkalmazáshoz.

A cikk következő részében végigvezetem a webpack lépésenkénti beállításán. Remélem, hogy a végére megérti a Webpack alapjait. Tehát megkapjuk ezt a gurulást ...

Mit építünk?

Valószínűleg hallottál már a ReactJS-ről. Ha ismeri a reakcióJS-t, valószínűleg tudja, mi az a create-reagál-alkalmazás . Azok számára, akiknek fogalmuk sincs a két dolog bármelyikéről, a ReactJS egy felhasználói felület könyvtár, amely nagyon hasznos az intelligens komplex felhasználói kezelőfelületek felépítésében, és a create- react -app egy CLI eszköza React alkalmazások elkészítéséhez egy kazánlemez fejlesztőjének beállításához vagy indításához.

Ma létrehozunk egy egyszerű React alkalmazást, de a create-reagál-alkalmazás CLI használata nélkül. Remélem, ez elég szórakoztatóan hangzik az Ön számára. :)

Telepítési szakasz

npm int

Így van, így kezdődik szinte minden jó: sima régi npm init. VS Code-t fogok használni, de a dolgok elindításához nyugodtan használjon tetszőleges kódszerkesztőt.

Mielőtt ezt megteheti, gondold meg, győződjön meg arról, hogy a legújabb nodeJS és az npm verzió helyileg telepítve van a gépedre. Kattintson a hivatkozások mindegyikére, ha többet szeretne megtudni a folyamatról.

$ npm init

Ez létrehoz egy indítócsomagot, és hozzáadja a package.json fájlt. Itt fogják megemlíteni az alkalmazás elkészítéséhez szükséges összes függőséget.

Egy egyszerű React alkalmazás létrehozásához két fő könyvtárra van szükségünk: React és ReactDOM. Tehát vegyük fel őket függőségként az alkalmazásunkba az npm használatával.

$ npm i react react-dom --save

Következő lépésként hozzá kell adnunk a webcsomagot, így együtt csomagolhatjuk az alkalmazásunkat. Nemcsak csomag, hanem gyors újratöltésre is szükségünk lesz, amely a webpack dev szerver segítségével lehetséges.

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

A --save--devcélja, hogy meghatározza, hogy ezek a modulok csak dev függőségek. Mivel most a React-szel dolgozunk, nem szabad megfeledkeznünk arról, hogy a React ES6 osztályokat és utasításokat importál, amit minden böngésző nem képes megérteni. Annak biztosításához, hogy a kód minden böngészőben olvasható legyen, szükségünk van egy olyan eszközre, mint a babel, hogy a kódunkat a böngészők normál olvasható kódjává alakítsuk át.

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

Nos, mit mondjak, ez volt a maximális telepítések száma, amelyet ígértem. A babel esetében először betöltöttük a mag babel könyvtárát, majd a betöltőt, végül 2 plugint vagy presetet, hogy kifejezetten a React-kel és az összes új ES2015 és ES6 kóddal működjenek együtt.

Továbblépve adjunk hozzá egy kis kódot, és kezdjük el a webcsomag konfigurálását.

Így kell kinéznie a package.json fájlnak az összes eddigi telepítés után. Lehet, hogy más verziószáma van attól függően, hogy mikor követi ezt a cikket.

A kód

Kezdjük azzal, hogy hozzáadunk egy webpack.config.js fájlt az alkalmazásstruktúránk gyökeréhez. Adja hozzá a következő kódot a webpack.config fájljához.

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

Oké, értsük meg a fenti sorokat.

Először azzal kezdjük, hogy megköveteljük az alapértelmezett elérési útvonal modul hozzáférését a fájl helyéhez és a fájl helyének módosítását.

Ezután megköveteljük, hogy a HTMLWebpackPlugin hozzon létre egy HTML fájlt, amelyet a csomagba kapcsolt JavaScript fájl / fájlok kiszolgálásához használ. További információ a HTMLWebpackPluginről a linkre kattintva.

Ezután megvan az export.module objektum, benne néhány tulajdonság. Az első a belépési tulajdonság,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