Clever Geek Handbook

Principes de base de la configuration Webpack

Tout d'abord, nous allons installer webpack, cela se fait à l'aide des commandes:



yarn add webpack webpack-cli -Dsi vous utilisez le gestionnaire de packages yarn

npm i webpack webpack-cli --save-dev, pour le gestionnaire de packages npm,



Webpack est configuré à l'aide du fichier de configuration webpack.config.jsqui est stocké dans le répertoire racine du projet.



Un exemple de fichier de configuration: 



const path = require('path')
module.exports = {
   watch: true,
   entry: "./src/index.js",
   output: {
       filename: "bundle.js",
       path: path.resolve(__dirname,'build'),
       publicPath: "/"
   }
};


La configuration initiale est la suivante:



  • watch - permet à Webpack de surveiller les modifications des fichiers et de les reconstruire;
  • entry - Indique le point d'entrée du projet et où commencer à créer le graphique des dépendances internes du projet;
  • sortie - Spécifie le chemin où le fichier créé sera situé et comment il sera nommé;


Vous devez également installer webpack-dev-server, dont vous avez besoin pour développer et déboguer l'application.



yarn add webpack-dev-serverpour le gestionnaire de paquets yarn ou

npm i webpack-dev-serversi vous utilisez npm



Pour configurer webpack-dev-server, ajoutez devServer dans notre fichier de configuration.



Paramètres pour webpack-dev-server: 



module.exports = {
    //...
    devServer: {
        port: 8000,
        historyApiFallback: true,
        hot: true,
    },
};


Nous devons également ajouter / remplacer le script de démarrage du projet dans notre fichier package.json: 



"start": "webpack-dev-server --mode development",


et un script pour construire la construction: 



"build": "webpack --mode production"


Chargeurs de démarrage



Les chargeurs sont des modules spéciaux qui sont utilisés pour "charger" d'autres modules. Ils vous permettent également de prétraiter les fichiers lorsqu'ils sont importés ou "chargés".



Les chargeurs peuvent convertir des fichiers tels que TypeScript en JavaScript, sass en css. Ils peuvent même nous permettre de faire des choses comme importer des fichiers CSS et HTML directement dans nos modules JavaScript. Pour les utiliser, vous devez enregistrer les chargeurs nécessaires dans la section module.rules du fichier de configuration.



Exemples de chargeurs:



  • babel-loader - utilise babel pour charger les fichiers ES2015.
  • file-loader - pour charger divers fichiers (images, morceaux de musique, etc.) dans le répertoire de sortie
  • style-loader - utilisé pour charger des styles
  • css-loader - permet de charger les fichiers de style
  • @ svgr / webpack - un chargeur qui vous permet d'utiliser des images svg comme éléments jsx


Pour utiliser babel-loader, vous devez installerBabel/ core . Installez également le préréglageBabel/ preset-env , qui compile ES2015 + vers ES5 en détectant automatiquement les plugins et les polyfiles nécessaires à Babel. Ensuite, créons un fichier .babelrc et ajoutons-y le préréglage précédemment installé. 



{
 "presets": [
   "@babel/preset-env"
 ]
}


Ajoutons maintenant un chargeur à notre configuration pour la conversion des fichiers Javascript. Cela nous permettra d'utiliser la syntaxe ES2015 + dans notre code (qui sera automatiquement convertie en ES5 dans la version finale). 



{
   test: /\.(js|jsx)$/,
   exclude: /node_modules/,
   use: {
       loader: 'babel-loader',
   },
},


Exemple de configuration avec le chargeur de fichiers 



{
   test: /\.(png|jpe?g|gif)$/i,
   use: [
       {
           loader: 'file-loader',
       },
   ],
},


Exemple de configuration pour le chargeur @ svgr / webpack 



{
   test : /\.(svg)$/,
   use: [
       {
           loader: "@svgr/webpack"
       }
   ]
}


Plugins



Les plugins sont l'épine dorsale de webpack, car essentiellement tout son travail est construit sur le système de plugins. Ils étendent considérablement les capacités des chargeurs de démarrage.



Les chargeurs effectuent le prétraitement des fichiers de n'importe quel format. Ils fonctionnent au niveau des fichiers individuels pendant ou avant la création du package. Une fois les chargeurs terminés, les plugins tournent. Les plugins n'effectuent généralement qu'une seule fonction.



Pour les utiliser, vous devez ajouter les plugins nécessaires dans la section plugins du fichier de configuration.



Exemples de plugins:



  • html-webpack-plugin - utilisé pour créer des fichiers html
  • copy-webpack-plugin - Copie des fichiers individuels ou des répertoires entiers qui existent déjà dans le répertoire de construction.
  • definePlugin - vous permet de créer des constantes globales
  • HotModuleReplacementPlugin - active le mode HMR, met à jour uniquement la partie qui a changé, sans recharger complètement l'application.


Exemple de configuration avec des plugins ajoutés: 



plugins: [
   new webpack.HotModuleReplacementPlugin(),
   new webpack.DefinePlugin({
       'process.env': JSON.stringify(process.env),
   }),
   new HtmlWebpackPlugin({
       template: "./public/index.html",
   }),
   new CopyWebpackPlugin({
       patterns: [
           { from: './public/favicon.ico', to: './public'}
       ]
   }),
],


Nous ajouterons également le plugin UglifyjsWebpackPlugin, qui minifie le code js, pour cela, vous devez installer uglifyjs-webpack-plugin et l'ajouter dans la section d' optimisation 



optimization: {
   minimizer: [new UglifyJsPlugin()]
},


More articles:


All Articles