Une introduction à Webpack: qu'est-ce que c'est et comment l'utiliser

introduction

D'accord, donc je suppose que vous avez entendu parler de webpack - c'est pourquoi vous êtes ici, non? La vraie question est ce que vous en savez? Vous pourriez savoir quelques choses à ce sujet, comme son fonctionnement, ou vous n'en avez peut-être absolument aucune idée. Quoi qu'il en soit, je peux vous assurer qu'après avoir lu cet article, vous vous sentirez probablement assez à l'aise avec l'ensemble de la situation du webpack .

Après tout - la nécessité est la mère de l' invention…

La citation ci-dessus est un moyen idéal de dire pourquoi Webpack existe. Mais pour mieux le comprendre, nous devons revenir en arrière, il y a longtemps, à l'époque où JavaScript n'était pas la nouvelle chose sexy, à l'époque où un site Web n'était qu'un petit paquet de bon vieux . html, CSS et probablement un ou quelques fichiers JavaScript dans certains cas. Mais très vite, tout cela allait changer.

Quel était le problème?

Toute la communauté de développement était impliquée dans une quête constante d'amélioration de l'expérience globale des utilisateurs et des développeurs autour de l'utilisation et de la création d'applications javascript / web. Par conséquent, nous avons vu beaucoup de nouvelles bibliothèques et frameworksintroduit.

Quelques modèles de conception ont également évolué au fil du temps pour offrir aux développeurs un moyen meilleur, plus puissant mais très simple d'écrire des applications JavaScript complexes. Avant, les sites Web n'étaient plus qu'un petit paquet contenant un nombre impair de fichiers. Ils ont déclaré devenir volumineux, avec l'introduction de modules JavaScript , car l'écriture de petits morceaux de code encapsulés était la nouvelle tendance. Finalement, tout cela a conduit à une situation où nous avions 4x ou 5x he de fichiers dans l'ensemble de l'application.

Non seulement la taille globale de l'application était un défi, mais il y avait aussi un énorme écart dans le type de code que les développeurs écrivaient et le type de code que les navigateurs pouvaient comprendre. Les développeurs ont dû utiliser beaucoup de code d'assistance appelé polyfills pour s'assurer que les navigateurs étaient capables d'interpréter le code dans leurs packages.

Pour répondre à ces problèmes, webpack a été créé. Webpack est un bundler de modules statiques.

Alors, comment Webpack a-t-il été la réponse?

En bref, Webpack parcourt votre package et crée ce qu'il appelle un graphique de dépendances qui se compose de divers modules dont votre application Web aurait besoin pour fonctionner comme prévu. Ensuite, en fonction de ce graphique, il crée un nouveau package qui se compose du nombre très strict de fichiers requis, souvent juste un seul fichier bundle.js qui peut être facilement branché au fichier html et utilisé pour l'application.

Dans la partie suivante de cet article, je vous guiderai à travers la configuration étape par étape du webpack. À la fin, j'espère que vous comprenez les bases de Webpack. Alors, allons-y…

Que construisons-nous?

Vous avez probablement entendu parler de ReactJS. Si vous connaissez reactJS, vous savez probablement ce qu'est create-react-app . Pour ceux d'entre vous qui n'ont aucune idée de ce que sont ces deux choses, ReactJS est une bibliothèque d'interface utilisateur qui est très utile pour créer des interfaces utilisateur complexes intelligentes, et create- react -app est un outil CLIpour configurer ou amorcer une configuration de développement standard pour créer des applications React.

Aujourd'hui, nous allons créer une application React simple mais sans utiliser la CLI create-react-app. J'espère que cela vous semble assez amusant. :)

Phase d'installation

npm int

C'est vrai, c'est comme ça que presque toutes les bonnes choses commencent: le bon vieux npm init. J'utiliserai VS Code, mais n'hésitez pas à utiliser n'importe quel éditeur de code que vous aimez pour démarrer.

Avant de pouvoir faire quoi que ce soit, pensez à vous assurer que la dernière version de nodeJS et de npm est installée localement sur votre machine. Cliquez sur chacun de ces liens pour en savoir plus sur le processus.

$ npm init

Cela créera un package de démarrage et ajoutera un fichier package.json pour nous. C'est là que toutes les dépendances nécessaires à la construction de cette application seront mentionnées.

Maintenant, pour créer une application React simple, nous avons besoin de deux bibliothèques principales: React et ReactDOM. Alors ajoutons-les en tant que dépendances dans notre application en utilisant npm.

$ npm i react react-dom --save

Ensuite, nous devons ajouter webpack, afin que nous puissions regrouper notre application. Non seulement le bundle, mais nous aurons également besoin d'un rechargement à chaud qui est possible en utilisant le serveur de développement webpack.

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

Le --save--devest de spécifier que ces modules ne sont que des dépendances de développement. Maintenant que nous travaillons avec React, nous devons garder à l'esprit que React utilise des classes ES6 et des instructions d'importation, ce que tous les navigateurs peuvent ne pas comprendre. Pour nous assurer que le code est lisible par tous les navigateurs, nous avons besoin d'un outil comme babel pour transpiler notre code en code lisible normal pour les navigateurs.

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

Eh bien, que puis-je dire, c'était le nombre maximum d'installations que je promets. Dans le cas de babel, nous avons d'abord chargé la bibliothèque principale de babel, puis le chargeur, et enfin 2 plugins ou préréglages pour travailler spécifiquement avec React et tout le nouveau code ES2015 et ES6 et versions ultérieures.

Continuons, ajoutons du code et commençons la configuration du webpack.

Voici comment le fichier package.json devrait se présenter après toutes les installations jusqu'à présent. Vous pouvez avoir un numéro de version différent selon le moment où vous suivez cet article.

Le code

Commençons par ajouter un fichier webpack.config.js à la racine de la structure de notre application. Ajoutez le code suivant dans votre fichier 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' }) ]}

Bon alors comprenons les lignes ci-dessus.

Nous commençons par demander au module de chemin par défaut d'accéder à l'emplacement du fichier et d'apporter des modifications à l'emplacement du fichier.

Ensuite, nous avons besoin que HTMLWebpackPlugin génère un fichier HTML à utiliser pour servir les fichiers / fichiers JavaScript groupés. En savoir plus sur HTMLWebpackPlugin en cliquant sur le lien.

Ensuite, nous avons l'objet export.module avec certaines propriétés. Le premier est la propriété entry,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

My two cents about webpack? Well, at times you may think that it’s nothing more than a tool, and why should you bother too much for a tool? But trust me when I say this: the initial struggle while learning your way around webpack will save you an enormous number of hours you would otherwise invest developing without webpack.

That’s all for now, hope to be back with yet another interesting article very soon. I hope you have enjoyed reading this one!

In case you face any difficulty or issues while following any of the above mentioned steps/processes, please feel free to get in touch and leave comments.

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

Twitter: //twitter.com/ashishnandansin