Darba sākšana ar Webpack [ar piemēru projektu]

Tīmekļa pakotne ir moduļa komplektētājs kas atvieglo sarežģītu JavaScript lietojumprogrammu izveidi. Tā ir ieguvusi nopietnu vilcienu, jo React kopiena to izvēlējās kā galveno būvniecības rīku. Webpack ir ne paketes pārvaldnieks, ne uzdevumu skrējējs tā izmanto atšķirīgu (progresīvāku) pieeju, bet tā mērķis ir arī izveidot dinamisku veidošanas procesu.

Webpack darbojas ar vaniļas JavaScript. Jūs varat to izmantot sasaistīt pieteikuma statiskos aktīvus, piemēram, attēlus, fontus, stilu tabulas, skriptus vienā failā rūpēties par visām atkarībām.

Lai izveidotu vienkāršu lietojumprogrammu vai tīmekļa vietni, piemēram, tādu, kam ir tikai viens JavaScript un viens CSS fails un daži attēli, jums nav nepieciešama tīmekļa pakotne, taču tas var būt dzīvības taupītājs sarežģītāka piemērošana ar vairākiem aktīviem un atkarībām.

Webpack vs uzdevumu skrējēji pret Browserify

Tātad, kā darbojas Webpack? salīdzinājumā ar citiem būvniecības rīkiem piemēram, Grunt, Gulp vai Browserify?

Grunt un Gulp ir uzdevumu skrējēji. Savā konfigurācijas failā jūs norādiet uzdevumus, un uzdevumu izpildītājs tos izpilda. The uzdevumu skrējēja darbplūsma būtībā izskatās šādi:

Tomēr Webpack ir a moduļa komplektētājs kas analizē visu projektu, izveido atkarības koku, un izveido komplektā iekļauto JavaScript failu ka tas kalpo pārlūkam.

Browserify ir tuvāk Webpack nekā uzdevumu skrējējiem, kā tas ir arī izveido atkarības grafiku bet tas tiek darīts tikai JavaScript moduļiem. Webpack iet soli tālāk, un tas ne tikai apvieno pirmkodu, bet arī arī citus aktīvus piemēram, attēlus, stilu tabulas, fontus utt.

Ja vēlaties uzzināt vairāk kā Webpack salīdzina ar citiem veidošanas rīkiem, Es jums iesaku divus rakstus:

1. Andrew Rays Tīmekļa pakotne: kad lietot un kāpēc savā emuārā
2. Cory House's Browserify vs Webpack freeCodeCamp (ar lieliskām ilustrācijām)

Abi iepriekš minētie attēli ir no Pro React rokasgrāmatas materiāli Webpack, vēl viens resurss, kas ir vērts apskatīt.

Četras galvenās Webpack koncepcijas

Webpack ir tiek izsauktas četras galvenās konfigurācijas iespējas “pamatjēdzienus” ka jums būs nepieciešams definēt izstrādes procesā:

1. Ieraksts - the sākumpunkts atkarības grafika (viens vai vairāki JavaScript faili).
2. Izeja - failu, kur vēlaties izvadi, kas jāpiegādā (viens JavaScript fails).
3. Iekrāvēji - pārmaiņas aktīvos pārvērst tos Webpack moduļos lai viņi varētu būt pievienots atkarības grafam. Piemēram, css-loader tiek izmantots CSS failu importēšanai.
4. Spraudņi - pielāgotas darbības un funkcijas paketi. Piemēram, i18n-webpack-spraudnis iegulda lokalizāciju paketē.

Iekrāvēji darbojas pēc datnes pirms apkopošanas notiek. Spraudņi tiek izpildīti komplektā iekļautajā kodā, apkopošanas procesa beigās.

Instalējiet Webpack

Uz instalējiet Webpack, atveriet komandrindu, dodieties uz savu projekta mapi un palaidiet šādu komandu:

 npm init 

Ja nevēlaties veikt konfigurāciju, varat veikt npm apdzīvot package.json failu ar noklusējuma vērtībām ar šādu komandu:

 npm init -y 

Tālāk instalējiet Webpack:

 npm instalējiet webpack --save-dev 

Ja esat izmantojis noklusējuma vērtības, tas ir, kā jūsu package.json failam vajadzētu izskatīties tagad (īpašības var būt citā secībā):

 "name": "_tests", "version": "1.0.0", "description": "", "main": "webpack.config.js", "atkarības": "webpack": "^ 3.6 .0 "," devDependencies ": " webpack ":" ^ 3.6.0 "," skripti ": " test ":" atbalss "Kļūda: nav norādīts pārbaudes tests" && exit 1 "," atslēgvārdi ": []," autors ":" "," licence ":" ISC " 

Izveidojiet konfigurācijas failu

Jums jāizveido a webpack.config.js failu projekta saknes mapē. Šim konfigurācijas failam ir galvenā loma, jo tā ir vieta, kur jūs vēlaties definēt četrus pamatjēdzienus (ieejas punkti, izeja, iekrāvēji, spraudņi).

The webpack.config.js failu ir konfigurācijas objekts no kurām īpašībām jums ir nepieciešams norādīt. Šajā rakstā mēs precizēsim četras īpašības atbilst četriem galvenajiem jēdzieniem (ieraksts, izvade, modulis, un iespraust), bet konfigurācijas objektam ir arī citas īpašības.

1. Izveidojiet ieejas punktu (-us)

Tev var būt vienu vai vairākus ieejas punktus. Jums tie ir jādefinē ieraksts īpašums.

Ievietojiet šādu koda fragmentu webpack.config.js failu. Tā norāda vienu ievades punktu:

 module.exports = entry: "./src/script.js"; 

Lai norādītu vairāk nekā vienu ievades punktu, ko var izmantot vai nu masīvs, vai objekta sintakse.

Projekta mapē, izveidot jaunu src mapi un a script.js failu tajā. Tas būs jūsu Ieejas punkts. Tikai testēšanas nolūkos ievietojiet virkni iekšpusē. Es izmantoju šādu (tomēr jūs varat izmantot arī interesantāku):

 const greeting = "Sveiki. Esmu Webpack startera projekts."; document.write (sveiciens); 

2. Definējiet izeju

Tev var būt tikai viens izejas fails. Tīmekļa pakotne šajā failā apvieno visus aktīvus. Jums ir jākonfigurē izvade īpašumu šādā veidā:

 const path = pieprasīt ("ceļš"); module.exports = entry: "./src/script.js", izeja: filename: "bundle.js", ceļš: path.resolve (__ dirname, 'dist'); 

The faila nosaukums īpašums nosaka pievienotā faila nosaukums, kamēr ceļš īpašums norāda direktorijas nosaukumu. Iepriekš minētais piemērs radīs /dist/bundle.js failu.

Lai gan tas nav obligāts, tas ir labāk izmantot path.resolve () metodi kad definējat ceļš īpašums, kā tas ir nodrošina precīzu moduļa izšķirtspēju (izejas absolūtais ceļš tiek izveidots saskaņā ar dažādiem noteikumiem dažādās vidēs, moduļu izšķirtspēja atrisina šo neatbilstību). Ja lietojat path.resolve, tev vajag pieprasīt the ceļš Mezglu modulis augšpusē webpack.config.js failu.

3. Pievienojiet iekrāvējus

Uz pievienojiet iekrāvējus, jums jādefinē modulis īpašums. Tālāk mēs pievienojam babel-loader kas ļauj jums droši izmantot ECMAScript 6 funkcijas jūsu JS failos:

 const path = pieprasīt ("ceļš"); module.exports = entry: "./src/script.js", izeja: faila nosaukums: "bundle.js", ceļš: path.resolve (__ dirname, 'dist'), modulis: rules: [test : /\.js$/, neietveriet: / (node_modules | bower_components) /, izmantojiet: loader: "babel-loader", opcijas: presets: ["env"]]; 

Konfigurācija var šķist sarežģīta, bet tā ir tikai kopēta Babel iekrāvēja dokumentācija. Lielākā daļa iekrāvēju nāk ar vai nu readme failu vai kādu dokumentāciju, lai jūs varētu (gandrīz) vienmēr zināt, kā tos pareizi konfigurēt. Un Webpack dokumentiem ir arī lapa, kas izskaidro kā konfigurēt modulis.

Jūs varat pievienot tik daudz iekrāvēju, cik nepieciešams, šeit ir pilns saraksts. Ņemiet vērā, ka jums ir nepieciešams instalējiet katru iekrāvēju ar npm lai tie darbotos. Babel iekrāvējam ir jāinstalē nepieciešamie mezglu iepakojumi ar npm:

 npm instalēt --save-dev babel-loader babel-core babel-preset-env webpack 

Ja jums ir jūsu skatījums package.json jūs redzēsiet, ka npm pievienoja trīs ar Babeli saistītās paketes devDependencies īpašums, tie rūpēsies par ES6 apkopošanu.

4. Pievienojiet spraudņus

Uz pievienojiet spraudņus, jums jānorāda spraudņi īpašums. Plus, jums ir arī pieprasīt spraudņus pa vienam, jo tie ir ārējie moduļi.

Mūsu piemērā mēs pievienojam divus Webpack spraudņus: HTML Webpack spraudnis un Ielādēt Webpack spraudni. Tīmekļa pakotnei ir a jauka spraudņa ekosistēma, šeit varat pārlūkot pilnu sarakstu.

Lai pieprasītu spraudņus kā mezglu moduļus, izveidot divas jaunas konstantes: HtmlWebpackPlugin un PreloadWebpackPlugin un izmantot pieprasīt () funkciju.

 const path = pieprasīt ("ceļš"); const HtmlWebpackPlugin = nepieciešams ("html-webpack-plugin"); const PreloadWebpackPlugin = nepieciešams ("iepriekš ielādēts webpack-plugin"); module.exports = entry: "./src/script.js", izeja: faila nosaukums: "bundle.js", ceļš: path.resolve (__ dirname, 'dist'), modulis: rules: [test : / (), jauns PreloadWebpackPlugin ()]; 

Tāpat kā iekrāvēju gadījumā, jums ir arī instalējiet Webpack spraudņus ar npm. Lai piemērā instalētu divus spraudņus, komandrindā palaidiet šādas divas komandas:

 npm instalēt html-webpack-spraudni --save-dev npm instalēt --save-dev preload-webpack-plugin 

Ja pārbaudāt savu package.json failu tagad, jūs redzēsiet, ka npm pievienoja divus spraudņus devDependencies īpašums.

Palaist Webpack

Uz izveidot atkarības koku un izvadiet paketi, izpildiet šādu komandu komandrindā:

 webpack 

Tas parasti aizņem vienu vai divas minūtes lai Webpack veidotu projektu. Kad esat pabeidzis, jūsu CLI redzēsiet līdzīgu ziņojumu:

Ja viss norisinājās pareizi, Webpack izveidots a dist mapi jūsu projekta saknes un ievietoja divus kompleksos failus (bundle.js un index.html) iekšpusē.

Github repo

Ja vēlaties pārbaudīt, lejupielādēt vai izvilkt visu projektu, apskatiet mūsu Github repo.