Johdanto Webpackiin: mikä se on ja miten sitä käytetään

Johdanto

Okei, joten oletan, että olet kuullut webpackista - siksi olet täällä, eikö? Todellinen kysymys on, mitä tiedät siitä? Saatat tietää muutamia asioita siitä, kuten miten se toimii, tai sinulla ei ehkä ole mitään aavistustakaan. Joko niin, voin vakuuttaa teille, että tämän artikkelin lukemisen jälkeen tunnette todennäköisesti tarpeeksi mukavan koko verkkopakkaustilanteessa .

Onhan välttämättömyys keksinnön äiti

Täydellinen tapa sanoa, miksi webpack on olemassa, on yllä oleva lainaus. Mutta ymmärtääkseen sen paremmin meidän on palattava takaisin, kun JavaScript ei ollut uusi seksikäs asia, niin vanhanaikaisina aikoina, jolloin verkkosivusto oli vain pieni nippu vanhaa hyvää . HTML, CSS ja todennäköisesti yksi tai muutama JavaScript-tiedosto joissakin tapauksissa. Mutta hyvin pian kaikki tämä muuttui.

Mikä oli ongelma?

Koko kehittäjäyhteisö oli mukana jatkuvassa pyrkimyksessä parantaa käyttäjä- ja kehittäjäkokemusta javascript / web-sovellusten käytöstä ja rakentamisesta. Siksi näimme paljon uusia kirjastoja ja kehyksiäotettu käyttöön.

Muutama suunnittelumalli kehittyi myös ajan myötä, jotta kehittäjät saisivat paremman, tehokkaamman mutta hyvin yksinkertaisen tavan kirjoittaa monimutkaisia ​​JavaScript-sovelluksia. Aiemmat verkkosivustot eivät olleet enää vain pieni paketti, jossa oli pariton määrä tiedostoja. He totesivat saavansa tilaa, JavaScript-moduulien käyttöönoton myötä , koska kapseloitujen pienten koodipalojen kirjoittaminen oli uusi suuntaus. Lopulta kaikki tämä johti tilanteeseen, jossa tiedostoja oli 4x tai 5x koko sovelluspaketissa.

Sen lisäksi, että sovelluksen koko oli haaste, oli myös valtava aukko siinä, millaisia ​​koodikehittäjät kirjoittivat ja minkälaiset koodiselaimet voisivat ymmärtää. Kehittäjien oli käytettävä paljon auttajakoodia, jota kutsutaan polyfillsiksi varmistaakseen, että selaimet pystyvät tulkitsemaan koodin paketeissaan.

Näihin ongelmiin vastaamiseksi luotiin verkkopaketti. Webpack on staattinen moduulipaketti.

Joten miten Webpack vastasi?

Lyhyesti sanottuna Webpack käy läpi pakettisi ja luo riippuvuuskaavion, joka koostuu erilaisista moduuleista, jotka web-sovelluksesi edellyttäisi toimiakseen odotetusti. Sitten, tästä kaaviosta riippuen, se luo uuden paketin, joka koostuu vaadittavien tiedostojen vähimmäismäärästä, usein vain yhdestä bundle.js-tiedostosta, joka voidaan kytkeä helposti html-tiedostoon ja käyttää sovelluksessa.

Tämän artikkelin seuraavan osan aikana opastan sinut läpi vaiheittaiset verkkopaketin asetukset. Toivon, että sen lopussa ymmärrät Webpackin perusteet. Joten saa tämän liikkuvan ...

Mitä rakennamme?

Olet todennäköisesti kuullut ReactJS: stä. Jos tiedät reakJS, tiedät todennäköisesti mikä on create-reagoi-sovellus . Niille teistä, joilla ei ole aavistustakaan siitä, kumpi näistä asioista on, ReactJS on käyttöliittymäkirjasto, joka on erittäin hyödyllinen älykkäiden monimutkaisten käyttöliittymien rakentamisessa, ja create-reagoi-sovellus on CLI-työkaluReact-sovellusten tekemistä varten kattilalevyasetusten määrittäminen tai käynnistyshihna.

Tänään luomme yksinkertaisen React-sovelluksen, mutta käyttämättä create-reagoi-sovelluksen CLI: tä. Toivon, että tämä kuulostaa sinulle tarpeeksi hauskalta. :)

Asennusvaihe

npm sis

Juuri niin, melkein kaikki hyvät asiat alkavat: tavallinen vanha npm init. Käytän VS-koodia, mutta voit käyttää mitä tahansa haluamaasi koodieditoria aloittaaksesi asiat.

Ennen kuin voit tehdä tämän, ajattele, että sinulla on uusin nodeJS ja npm-versio asennettuna paikallisesti koneellesi. Napsauta kutakin linkkiä tietääksesi enemmän prosessista.

$ npm init

Tämä luo aloituspaketin ja lisää meille package.json-tiedoston. Tässä mainitaan kaikki tämän sovelluksen rakentamiseen tarvittavat riippuvuudet.

Yksinkertaisen React-sovelluksen luomiseen tarvitaan nyt kaksi pääkirjastoa: React ja ReactDOM. Joten lisätään ne riippuvuuksina sovellukseemme käyttämällä npm: tä.

$ npm i react react-dom --save

Seuraavaksi meidän on lisättävä verkkopaketti, jotta voimme niputtaa sovelluksemme yhteen. Ei vain nippu, mutta tarvitsemme myös pikalatauksen, joka on mahdollista webpack dev -palvelimen avulla.

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

Tarkoituksena --save--devon määrittää, että nämä moduulit ovat vain dev-riippuvuuksia. Koska työskentelemme Reactin kanssa, meidän on pidettävä mielessä, että React käyttää ES6-luokkia ja tuontilauseita, joita kaikki selaimet eivät ehkä ymmärrä. Jotta voimme varmistaa, että koodi on kaikkien selainten luettavissa, tarvitsemme työkalun, kuten babel, koodin siirtämiseksi normaaliksi selainkoodiksi.

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

No mitä voin sanoa, se oli suurin sallittu asennusten määrä. Babelin tapauksessa olemme ladanneet ensin babel-ydinkirjaston, sitten lataimen ja lopuksi 2 laajennusta tai esiasetusta toimimaan nimenomaan Reactin ja kaikkien uusien ES2015- ja ES6-koodien kanssa.

Lisätään vielä koodi ja aloitetaan verkkopaketin määritys.

Näin paketin.json tiedoston pitäisi huolehtia kaikista tähän mennessä asennetuista asennuksista. Sinulla voi olla eri versionumero riippuen siitä, kun seuraat tätä artikkelia.

Koodi

Aloitetaan lisäämällä webpack.config.js- tiedosto sovellusrakenteen juuriin. Lisää seuraava koodi webpack.config-tiedostoon.

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

Okei, ymmärretään siis yllä olevat rivit.

Ensinnäkin vaaditaan oletuspolun moduulia pääsemään tiedoston sijaintiin ja tekemään muutoksia tiedoston sijaintiin.

Seuraavaksi vaaditaan, että HTMLWebpackPlugin luo HTML-tiedoston, jota käytetään niputettujen JavaScript-tiedostojen / tiedostojen näyttämiseen. Lue lisää HTMLWebpackPluginista napsauttamalla linkkiä.

Sitten meillä on export.module-objekti, jossa on joitain ominaisuuksia. Ensimmäinen on merkintäominaisuus,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

Kaksi senttiä webpackista? Toisinaan saatat ajatella, että se ei ole muuta kuin työkalu, ja miksi sinun pitäisi vaivautua liikaa työkalua varten? Mutta luota minuun, kun sanon tämän: ensimmäinen taistelu samalla kun opit tietäsi verkkopakkauksen, säästää valtavan määrän tunteja, jotka muuten investoit kehitykseen ilman verkkopakettia.

Se on kaikki toistaiseksi, toivottavasti palaat jälleen uuden mielenkiintoisen artikkelin kanssa pian. Toivottavasti olet nauttinut tämän lukemisesta!

Jos kohtaat ongelmia tai ongelmia noudattaessasi jotain edellä mainituista vaiheista / prosesseista, ota rohkeasti yhteyttä ja jätä kommentteja.

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

Twitter: //twitter.com/ashishnandansin