Webpacki sissejuhatus: mis see on ja kuidas seda kasutada

Sissejuhatus

Okei, nii et ma eeldan, et olete veebipakendist kuulnud - sellepärast olete siin, eks? Tegelik küsimus on, mida te sellest teate? Võib-olla teate selle kohta mõnda asja, näiteks kuidas see töötab, või teil pole täiesti aimugi. Mõlemal juhul võin teile kinnitada, et pärast selle artikli lugemist tunnete end tõenäoliselt kogu veebipaketi olukorras piisavalt mugavalt .

Lõppude lõpuks - vajadus on leiutise ema ...

Ideaalne viis öelda, miks veebipakk on olemas, on ülaltoodud tsitaat. Kuid selle paremaks mõistmiseks tuleb minna tagasi, tagasi, kui JavaScript ei olnud uus seksikas asi, nendes vanades aegades, kui veebisait oli vaid väike hea vanade kogum . HTML, CSS ja mõnel juhul tõenäoliselt üks või mõni JavaScripti fail. Kuid väga varsti muutus see kõik.

Milles oli probleem?

Kogu arenduskogukond osales pidevas püüdluses parandada kasutajate ja arendajate üldist kasutuskogemust javascripti / veebirakenduste kasutamisel ja ülesehitamisel. Seetõttu nägime palju uusi raamatukogusid ja raamistikkesisse viidud.

Aja jooksul arenesid ka mõned kujundusmustrid, et anda arendajatele parem, võimsam, kuid väga lihtne viis keerukate JavaScripti rakenduste kirjutamiseks. Varasemad veebisaidid ei olnud enam lihtsalt väike pakett, milles oli paaritu arv faile. Nad väitsid, et JavaScripti moodulite kasutuselevõtt muutub suuremahuliseks, kuna uus trend oli kapseldatud väikeste kooditükkide kirjutamine. Lõpuks viis see kõik olukorrani, kus meil oli kogu rakenduspaketis 4x või 5x faile.

Väljakutse oli mitte ainult rakenduse kogumaht, vaid ka tohutu lõhe selles, millist tüüpi koodiarendajad kirjutasid ja millist tüüpi koodibrauserid aru said. Arendajad pidid kasutama palju abikoodi, mida nimetatakse polüfillideks , veendumaks, et brauserid suudavad koodi oma pakettides tõlgendada.

Nendele küsimustele vastamiseks loodi veebipakk. Webpack on staatilise mooduli komplekt.

Niisiis, kuidas oli Webpack vastus?

Lühidalt öeldes vaatab Webpack teie paketi läbi ja loob sõltuvusgraafiku, mis koosneb erinevatest moodulitest, mida teie veebirakendus eeldatavaks toimimiseks vajaks. Seejärel loob see sõltuvalt sellest graafikust uue paketi, mis koosneb minimaalsest nõutavast failide minimaalsest arvust, sageli vaid ühest failist bundle.js, mille saab hõlpsasti HTML-faili ühendada ja rakenduse jaoks kasutada.

Selle artikli järgmises osas tutvustan teid veebipaki samm-sammult. Loodan, et selle lõpuks saate Webpacki põhitõdedest aru. Nii et laseme selle veereda ...

Mida me ehitame?

Ilmselt olete ReactJS-ist kuulnud . Kui teate reakJS-i, teate tõenäoliselt, mis on rakendus-reageeri-rakendus . Neile teist, kellel pole aimugi, mis neist kahest asjast on, on ReactJS kasutajaliidese teek, mis on intelligentsete keerukate kasutajaliideste loomisel väga kasulik ning rakendus-reageeri-rakendus on CLI-vahendReapli rakenduste loomiseks katlaplaadi seadistamise seadistamiseks või alglaadimiseks.

Täna loome lihtsa rakenduse React, kuid ilma looma-reageeri-rakenduse CLI-d kasutamata. Loodan, et see kõlab teile piisavalt lõbusalt. :)

Installimise faas

npm int

Just, nii saavad alguse peaaegu kõik head asjad: tavaline vana npm init. Ma kasutan VS-koodi, kuid võite asjade alustamiseks vabalt kasutada mis tahes koodiredaktorit, mis teile meeldib.

Enne kui midagi sellist teha saate, veenduge, et teie arvutisse oleks installitud uusim nodeJS ja npm versioon. Protsessi kohta lisateabe saamiseks klõpsake neid linke.

$ npm init

See loob stardipaketi ja lisab meile faili package.json. Siin mainitakse kõiki selle rakenduse loomiseks vajalikke sõltuvusi.

Nüüd vajame lihtsa Reacti rakenduse loomiseks kahte peamist teeki: React ja ReactDOM. Nii et lisagem need meie rakendusse sõltuvustena, kasutades npm.

$ npm i react react-dom --save

Järgmisena peame lisama veebipaketi, et saaksime oma rakenduse komplekteerida. Mitte ainult komplekt, vaid vajame ka kuuma uuesti laadimist, mis on võimalik veebipaketi dev serveri abil.

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

Selle eesmärk --save--devon täpsustada, et need moodulid on ainult dev-sõltuvused. Kuna töötame Reactiga, peame meeles pidama, et React kasutab ES6 klasse ja impordib avaldusi, millest kõik brauserid ei pruugi aru saada. Veendumaks, et kood on loetav kõikides brauserites, vajame sellist koodi nagu Babel, et meie kood üle kanda tavaliseks loetavaks brauserite koodiks.

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

Noh, mida ma oskan öelda, see oli maksimaalne installide arv, mida ma luban. Paabeli puhul oleme kõigepealt laadinud põhibabeli teegi, seejärel laadija ja lõpuks 2 pistikprogrammi või eelseadistust, et töötada spetsiaalselt Reactiga ja kõigi uute ES2015 ja ES6 koodidega.

Edasi liikudes lisame mõne koodi ja alustame veebipaki seadistamist.

Nii peaks fail pakett.json hoolitsema kõigi seniste installide eest. Teil võib olla erinev versiooninumber, olenevalt sellest, kui te seda artiklit jälgite.

Kood

Alustuseks lisame faili webpack.config.js meie rakenduse struktuuri juure. Lisage järgmine kood oma faili 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' }) ]}

Olgu, nii et mõistame ülaltoodud ridu.

Kõigepealt nõuame vaikimisi moodulilt juurdepääsu faili asukohale ja faili asukoha muutmiseks.

Järgmisena nõuame HTMLWebpackPluginilt HTML-faili loomist, mida kasutatakse komplekteeritud JavaScripti failide / failide esitamiseks. Lisateavet HTMLWebpackPlugini kohta leiate lingil klõpsates.

Siis on meil objekt eksport.moodul, milles on mõned omadused. Esimene neist on sisenemise omadus,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

Minu kaks senti veebipaki kohta? Noh, võite mõnikord mõelda, et see pole midagi muud kui tööriist ja miks peaksite tööriista pärast liiga palju vaeva nägema? Kuid usaldage mind, kui ütlen seda: esialgne võitlus veebipaketi ümber õppides säästab tohutult tunde, mida muidu investeeriksite ilma veebipakita.

Praegu on see kõik, loodan, et tulete varsti tagasi veel ühe huvitava artikliga. Loodan, et teile on meeldinud seda lugeda!

Kui teil tekib ülalnimetatud sammude / protsesside järgimisel probleeme või probleeme, võtke palun ühendust ja jätke kommentaarid.

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

Twitter: //twitter.com/ashishnandansin