Skip to main content

Webpack

>>>>>>>>>>>>>>>>>>>>>>>>>>Que signifie Webpack?

Webpack est ce que l’on appelle un « codebundler », qui sert principalement à fusionner différents fichiers de script Javapour les utiliser dans le navigateur.

Division du code et JavaScript

L’environnement d’exécution NodeJS, dans le cadre duquel JavaScript peut être utilisé côté serveur, a pris en charge dès le début la division du code de JavaScript en modules utilisant CommonJS. CommonJS permet de diviser le code en modules dépendants et de les charger indépendamment les uns des autres selon les besoins. La division en modules indépendants et le fractionnement du code sont effectués principalement pour une meilleure gestion et une administration plus facile du code du programme. Il s’agit d’une pratique d’ingénierie courante, utilisée depuis des décennies dans divers langages de programmation tels que Java, C++ ou Python. Quel que soit le navigateur web dans lequel JavaScript est utilisé, le langage de script ne prend pas en charge le fractionnement du code.

Modules pour le navigateur web

C’est là que Webpack entre en jeu. Codebundler prend en charge le fractionnement du code dans le navigateur web en chargeant des modules indépendants à la demande comme s’ils étaient destinés à être utilisés dans un environnement NodeJS. Le code modularisé est d’abord analysé et traité par Codebundler, puis il est utilisé pour créer un paquet qui peut être chargé dynamiquement chaque fois que nécessaire. En outre, le bundler nous permet d’utiliser des paquets npm en tant que modules, comme jQuery ou React. Il n’est donc pas nécessaire de les intégrer sous forme de scripts individuels dans le document HTML, ce qui présente de nombreux avantages, notamment :

  • pas de variables globales
  • pas d’externalisation
  • le code devient beaucoup plus gérable et prévisible

Configuration de Webpack

La configuration est réalisée sous la forme d’un module NodeJS qui exporte un objet appelé « Config ». Il peut contenir n’importe quel code de script Java, ce qui ouvre une multitude de possibilités différentes aux développeurs. Par exemple, un fichier d’entrée pour le Codebundler peut être chargé dynamiquement à partir du système de fichiers selon les besoins. L’objet de configuration comprend quatre mots-clés importants :

Entrée

Ce sont les paramètres d’entrée. Grâce à cela, les développeurs peuvent donner à Codebundler des instructions précises sur l’endroit où commencer à créer des paquets. Exemple d’une entrée config :

/module.exports={
/contexte:path.resolve(__dirname),
/entrée : [‘./index.js’,
/entrée : [‘./index.js’, ‘./login.js’],
/entrée : {
/index : ‘./index.js’,
/login : ‘./login.js’,
/},
/}

Sortie

Il s’agit d’un objet avec des clés pour contrôler la sortie de Webpack. Exemple pour Output-Config :

/module.exports={
/contexte:path.resolve(__dirname),
/entrée : [‘./index.js’,
/entrée : [‘./index.js’, ‘./login.js’],
/entrée : {
/index : ‘./index.js’,
/login : ‘./login.js’,
/},
/output:{
/chemin:chemin.join(__dirname, ‘build’),
/publicPath : ‘/’,
/filename : ‘bundle.js’,
/filename : ‘[name].js’,
/filename : ‘[chunkhash].js’,
/}
/}

Chargeur

Il s’agit de transformations qui peuvent être utilisées pour ajuster la configuration des modules individuels avant qu’ils ne soient assemblés dans un paquet. Exemple d’utilisation d’un chargeur :

/module.exports={
/module:{
/règles :[
/{
/test:/.js$/
/utilisation :[
/{
/loader :[ /{ babel-loader,
/options:{
/presets :[ ‘react’]
/}
/}
/]
/},
/{
/test:/.sass$/,
/utilisation :[
/{
/loader : ‘style-loader’,
/},
/{
/loader : ‘css-loader’,
/},
/{
/loader : ‘sass-loader’,
/}
/]
/}
/]
/}
/}

Plug-ins

Les plug-ins sont des transformations qui sont appliquées par paquet. Ils sont utilisés, par exemple, pour des fonctionnalités qui ne sont pas prises en charge par le Loader. Exemple de configuration d’un plug-in :

/module.exports={
/plugins :[
/newExtractTextPlugin({
/nom : « bundle.css » (bundle.css)
/}),
/newwebpack.optimize.UglifyJsPlugin({
/minimize:true
/}),
/]
/}

Conclusion de l’équipe OM Optimiser

Webpack est un regroupeur de code qui permet de modulariser le code du programme au niveau du front-end, ce qui contribue à une meilleure gérabilité et à une administration plus facile du code du programme.

Vous avez d'autres questions ?

Veuillez nous contacter


Autres contenus