„Webpack“ įvadas: kas tai yra ir kaip juo naudotis

Įvadas

Gerai, todėl manau, kad jūs girdėjote apie internetinę pakuotę. Štai kodėl jūs čia, tiesa? Tikrasis klausimas yra tai, ką jūs žinote apie tai? Galite žinoti apie tai keletą dalykų, pvz., Kaip tai veikia, arba neturite jokio supratimo. Šiaip ar taip, galiu jus patikinti, kad perskaitę šį straipsnį greičiausiai jausitės pakankamai patogiai susidūrę su visa internetinės pakuotės situacija .

Juk būtinybė yra išradimo motina ...

Aukščiau pateikta citata yra puikus būdas pasakyti, kodėl egzistuoja internetinė pakuotė. Tačiau norėdami geriau suprasti, turime grįžti atgal, kai „JavaScript“ nebuvo naujas seksualus dalykas, senais laikais, kai svetainė buvo tik maža senų gerų paketų dalis . HTML, CSS ir kai kuriais atvejais tikriausiai vienas ar keli „JavaScript“ failai. Tačiau labai greitai visa tai ketino pasikeisti.

Kokia buvo problema?

Visa kūrėjų bendruomenė nuolat siekė pagerinti bendrą naudotojų ir kūrėjų patirtį naudojant ir kuriant „javascript“ / žiniatinklio programas. Todėl pamatėme daug naujų bibliotekų ir sistemųįvesta.

Keletas dizaino modelių taip pat laikui bėgant tobulėjo, kad kūrėjai galėtų geriau, galingiau, bet labai paprastai parašyti sudėtingas „JavaScript“ programas. Anksčiau internetinės svetainės nebebuvo tik mažas paketas, kuriame buvo nelyginis failų skaičius. Jie teigė, kad vis didėjantys, įvedant „ JavaScript“ modulius , nes nauja tendencija buvo rašyti mažus kodo gabalus. Galų gale visa tai sukėlė situaciją, kai bendrame programos pakete turėjome 4x arba 5x failų.

Iššūkis buvo ne tik bendras programos dydis, bet ir didžiulė spraga kodų kūrėjų rašymo ir kodų naršyklių rūšies supratimo srityse. Kūrėjai turėjo naudoti daug pagalbinio kodo, vadinamo „ polyfills“ , kad įsitikintų, jog naršyklės sugeba interpretuoti kodą savo paketuose.

Norėdami išspręsti šias problemas, buvo sukurta internetinė pakuotė. „Webpack“ yra statinio modulio paketas.

Taigi, kaip „Webpack“ buvo atsakymas?

Trumpai tariant, „Webpack“ peržiūri jūsų paketą ir sukuria tai, ką jis vadina, priklausomybės grafiką, kurį sudaro įvairūs moduliai, kurių jūsų žiniatinklio programai reikės, kad veiktų kaip tikėtasi. Tada, atsižvelgiant į šią diagramą, jis sukuria naują paketą, kurį sudaro minimalus reikalingų failų skaičius, dažnai tik vienas „bundle.js“ failas, kurį galima lengvai prijungti prie html failo ir naudoti programai.

Kitoje šio straipsnio dalyje aprašysiu žingsnis po žingsnio žiniatinklio paketo nustatymą. Tikiuosi, kad suprasite „Webpack“ pagrindus. Taigi leiskite tai sukti ...

Ką mes statome?

Jūs tikriausiai girdėjote apie „ ReactJS“. Jei žinote „ReaJJS“, tikriausiai žinote, kas yra „ sukurti-reaguoti“ programa . Tiems, kurie neįsivaizduoja, kas yra vienas iš šių dviejų dalykų, „ ReactJS“ yra vartotojo sąsajos biblioteka, kuri yra labai naudinga kuriant intelektualias sudėtingas vartotojo sąsajas, o „ create- reago“ programa yra CLI įrankisuž „boilerplate dev“ sąrankos nustatymą ar paleidimą, kad būtų galima atlikti „React“ programas.

Šiandien mes sukursime paprastą „React“ programą, tačiau nenaudosime „create-reago-app“ CLI. Tikiuosi, kad tai jums skamba pakankamai smagiai. :)

Diegimo etapas

npm tarpt

Tiesa, taip prasideda beveik visi geri dalykai: paprastas senas npm init. Aš naudosiu „VS Code“, bet drąsiai naudokitės bet kokiu jums patinkančiu kodo redaktoriumi, kad galėtumėte pradėti darbus.

Prieš tai atlikdami, pagalvokite, įsitikinkite, kad jūsų kompiuteryje yra įdiegtas naujausias „nodeJS“ ir „npm“ versija. Spustelėkite kiekvieną iš šių nuorodų, kad sužinotumėte daugiau apie procesą.

$ npm init

Tai sukurs pradinį paketą ir pridės mums failą package.json. Čia bus paminėtos visos priklausomybės, reikalingos šiai programai sukurti.

Dabar, norint sukurti paprastą „React“ programą, mums reikia dviejų pagrindinių bibliotekų: „React“ ir „ReactDOM“. Taigi pridėkime juos kaip priklausomybes į mūsų programą naudodami npm.

$ npm i react react-dom --save

Toliau turime pridėti internetinę paketą, kad galėtume sujungti savo programą. Reikės ne tik sugrupuoti, bet ir reikalauti karšto perkėlimo, kuris įmanomas naudojant „webpack dev“ serverį.

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

--save--devYra nurodyti, kad šie moduliai yra tik dev priklausomybes. Kadangi dirbame su „React“, turime nepamiršti, kad „React“ naudoja ES6 klases ir importuoja teiginius, ko visos naršyklės gali nesuprasti. Norint įsitikinti, kad kodas yra skaitomas visose naršyklėse, mums reikia tokio įrankio kaip „Babel“, kad mūsų kodas būtų perkeltas į įprastą skaitytiną naršyklių kodą.

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

Ką aš galiu pasakyti, tai buvo maksimalus įdiegimų skaičius, kurį žadu. „Babel“ atveju pirmiausia įkėlėme pagrindinę „Babel“ biblioteką, tada krautuvą ir galiausiai 2 įskiepius ar išankstinius nustatymus, kad galėtume dirbti su „React“ ir visais naujaisiais ES2015 ir ES6 kodais.

Toliau pridėkime kodą ir pradėkime internetinės pakuotės konfigūraciją.

Taip failas „package.json“ turėtų atrodyti po visus ligšiolinius diegimus. Priklausomai nuo to, kada sekate šį straipsnį, galite turėti skirtingą versijos numerį.

Kodas

Pradėkime pridėdami failą webpack.config.js į savo programos struktūros šaknį. Pridėkite šį kodą savo faile 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' }) ]}

Gerai, supraskime aukščiau pateiktas eilutes.

Pirmiausia mes reikalaujame, kad numatytasis kelio modulis pasiektų failo vietą ir pakeistų failo vietą.

Tada mes reikalaujame, kad HTMLWebpackPlugin sugeneruotų HTML failą, kuris būtų naudojamas pateikiant „JavaScript“ failą / failus. Skaitykite daugiau apie HTMLWebpackPlugin spustelėdami nuorodą.

Tada turime objektą export.module su kai kuriomis savybėmis. Pirmasis yra įrašo ypatybė,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

Mano du centai apie internetinę pakuotę? Na, kartais galite pagalvoti, kad tai ne kas kita, kaip įrankis, ir kodėl turėtumėte per daug vargti dėl įrankio? Bet patikėk manimi, kai sakau tai: pradinė kova mokantis internetinės pakuotės padės sutaupyti daugybę valandų, kurias kitaip investuotum kurdamasis be internetinės pakuotės.

Kol kas viskas, tikiuosi, kad netrukus grįšite su dar vienu įdomiu straipsniu. Tikiuosi, kad jums patiko skaityti šį!

Jei atlikdami bet kurį iš pirmiau minėtų žingsnių / procesų susiduriate su sunkumais ar problemomis, nedvejodami susisiekite ir palikite komentarus.

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

„Twitter“: //twitter.com/ashishnandansin