En introduktion til Webpack: hvad det er, og hvordan man bruger det

Introduktion

Okay, så jeg antager, at du har hørt om webpack - det er derfor, du er her, ikke? Det virkelige spørgsmål er, hvad ved du om det? Du ved muligvis et par ting om det, som hvordan det fungerer, eller måske har du absolut ingen anelse. Uanset hvad kan jeg forsikre dig om, at efter at have læst denne artikel, vil du sandsynligvis føle dig godt nok med hele webpack-situationen .

Når alt kommer til alt - nødvendighed er opfindelsens mor ...

En perfekt måde at sige, hvorfor webpack findes, er ovenstående citat. Men for at forstå det bedre, er vi nødt til at gå tilbage, langt tilbage, når JavaScript ikke var den nye sexede ting, i de gamle tidlige tidsaldre, hvor et websted kun var et lille bundt af godt gammelt . html, CSS og sandsynligvis en eller et par JavaScript-filer i nogle tilfælde. Men meget snart ville alt dette ændre sig.

Hvad var problemet?

Hele dev-samfundet var involveret i en konstant søgen efter at forbedre den samlede bruger- og udvikleroplevelse omkring brug og opbygning af javascript / webapplikationer. Derfor så vi mange nye biblioteker og rammerintroduceret.

Et par designmønstre udviklede sig også over tid for at give udviklere en bedre, mere kraftfuld, men meget enkel måde at skrive komplekse JavaScript-applikationer på. Websites før var ikke mere bare en lille pakke med et ulige antal filer i dem. De sagde, at de blev voluminøse med introduktionen af JavaScript-moduler , da det var den nye tendens at skrive indkapslede små stykker kode. Til sidst fører alt dette til en situation, hvor vi havde 4x eller 5x antal filer i den samlede applikationspakke.

Ikke kun var applikationens samlede størrelse en udfordring, men der var også et stort hul i den type kode, som udviklere skrev, og den slags kodebrowsere kunne forstå. Udviklere måtte bruge en masse hjælpekoder kaldet polyfills for at sikre, at browserne var i stand til at fortolke koden i deres pakker.

For at besvare disse problemer blev webpack oprettet. Webpack er en statisk modulbundter.

Så hvordan var Webpack svaret?

Kort fortalt går Webpack gennem din pakke og opretter det, den kalder en afhængighedsgraf, der består af forskellige moduler, som din webapp har brug for for at fungere som forventet. Afhængigt af denne graf opretter den derefter en ny pakke, der består af det meget minimale antal krævede filer, ofte kun en enkelt bundle.js-fil, der let kan tilsluttes til html-filen og bruges til applikationen.

I løbet af den næste del af denne artikel vil jeg tage dig gennem trinvis opsætning af webpack. I slutningen af ​​det håber jeg, at du forstår det grundlæggende i Webpack. Så lad os få denne rullende ...

Hvad bygger vi?

Du har sikkert hørt om ReactJS. Hvis du kender reactJS, ved du sandsynligvis, hvad create-react-app er. For dem af jer, der ikke har nogen idé om, hvad en af ​​disse to ting er, er ReactJS et UI-bibliotek, som er meget nyttigt til at opbygge intelligente komplekse UI'er, og create-react-app er et CLI-værktøjtil opsætning eller bootstrapping af en opsætning af kedelpladeudvikling for at oprette React-applikationer.

I dag opretter vi en simpel React-applikation, men uden brug af create-react-app CLI. Jeg håber, det lyder sjovt nok for dig. :)

Installationsfase

npm int

Det er rigtigt, det er sådan næsten alle gode ting starter: almindelig gammel npm init. Jeg bruger VS-kode, men du er velkommen til at bruge en hvilken som helst kodeditor, du kan lide, for at komme i gang.

Inden du kan gøre noget af dette, tænkte, skal du sørge for at have den nyeste nodeJS og npm-versionen installeret lokalt på din maskine. Klik på hvert af disse links for at vide mere om processen.

$ npm init

Dette opretter en startpakke og tilføjer en package.json-fil til os. Det er her, alle de afhængigheder, der kræves for at opbygge denne applikation, vil blive nævnt.

Nu til oprettelse af en simpel React-applikation har vi brug for to hovedbiblioteker: React og ReactDOM. Så lad os få dem tilføjet som afhængigheder i vores applikation ved hjælp af npm.

$ npm i react react-dom --save

Derefter skal vi tilføje webpack, så vi kan samle vores app sammen. Ikke kun pakke, men vi vil også kræve varm genindlæsning, hvilket er muligt ved hjælp af webpack dev-serveren.

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

Det --save--dever at specificere, at disse moduler kun er dev-afhængigheder. Nu da vi arbejder med React, skal vi huske på, at React bruger ES6-klasser og importerer udsagn, noget som alle browsere muligvis ikke kan forstå. For at sikre, at koden kan læses af alle browsere, har vi brug for et værktøj som babel til at transpilere vores kode til normal læsbar kode for browsere.

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

Nå, hvad kan jeg sige, det var det maksimale antal installationer, jeg lover. I tilfælde af babel har vi først indlæst kernebabelbiblioteket, derefter læsseren og til sidst 2 plugins eller forudindstillinger for at arbejde specifikt med React og al den nye ES2015 og ES6-kode.

Lad os tilføje noget kode, og lad os starte konfigurationen af ​​webpack.

Dette er, hvordan filen package.json skal se efter alle installationer hidtil. Du har muligvis et andet versionsnummer afhængigt af, hvornår du følger denne artikel.

Koden

Lad os starte med at tilføje en webpack.config.js- fil i roden af ​​vores applikationsstruktur. Tilføj følgende kode i din webpack.config-fil.

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

Okay så lad os forstå linjerne ovenfor.

Først starter vi med at kræve, at standardstymodulet har adgang til filplaceringen og foretager ændringer i filplaceringen.

Dernæst kræver vi, at HTMLWebpackPlugin genererer en HTML-fil, der skal bruges til servering af bundtet JavaScript-fil / filer. Læs mere om HTMLWebpackPlugin ved at klikke på linket.

Så har vi export.module-objektet med nogle egenskaber i dem. Den første er indgangsejendommen,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

Mine to cent om webpack? Til tider tror du måske, at det ikke er andet end et værktøj, og hvorfor skulle du gider for meget for et værktøj? Men stol på mig, når jeg siger dette: den indledende kamp, ​​mens du lærer dig rundt på webpack, sparer dig et enormt antal timer, som du ellers ville investere i at udvikle uden webpack.

Det er alt for nu, håber at være tilbage med endnu en interessant artikel meget snart. Jeg håber, du har nydt at læse denne!

Hvis du står over for problemer eller problemer, mens du følger et af de ovennævnte trin / processer, er du velkommen til at kontakte og efterlade kommentarer.

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

Twitter: //twitter.com/ashishnandansin