Configurer Webpack dans un projet Create-React-App

1. Qu’est-ce que le Webpack create-react-app dans React ?
2. Localisez les configurations et les fichiers Webpack create-react-app dans React
3. Modifier la configuration Webpack de create-react-app dans React

Les bundles JavaScript facilitent le processus de développement en combinant des fichiers séparés en un seul. Pour les débutants, les bundlers peuvent être assez difficiles à mettre en place.

Lorsque le framework React en était encore à ses balbutiements, il y a quelques années, la communauté était divisée entre plusieurs bundlers. L’équipe derrière le framework a décidé d’arrêter cette division et de sélectionner une solution préférée. Le bundler qu’ils ont choisi était webpack, mais ce par défaut ne fonctionne pas pour certaines personnes.

Qu’est-ce que le Webpack create-react-app dans React ?

React a un projet de démarrage appelé create-react-app pour créer des applications. Une fois installé, il fournit un environnement avec une configuration webpack existante.

Le processus de configuration du webpack est un peu compliqué. Si vous ne savez pas ce que vous faites, la mise en place d’un webpack prendra une éternité, et cela pourrait faire plus de mal que de bien. Heureusement, create-react-app fait tout ce travail pour vous.

En arrière-plan, create-react-app s’occupe de tout l’outillage pour vous. De cette façon, les développeurs React débutants et intermédiaires peuvent se concentrer sur l’écriture de code plutôt que sur des processus de configuration complexes.

Localisez les configurations et les fichiers Webpack create-react-app dans React

Une fois configuré, le dossier d’un projet create-react-app contient de nombreux autres dossiers. À moins que vous ne sachiez où chercher, trouver les fichiers de configuration pour Webpack peut être difficile.

Dans un premier temps, vous devez ouvrir le fichier package.json. C’est là que vous pouvez trouver des informations sur les dépendances et les outils utilisés sur votre application.

Une fois le fichier ouvert, descendez jusqu’à l’objet 'scripts': {}. Vous remarquerez peut-être que create-react-app utilise une bibliothèque appelée react-scripts.

Pour localiser les fichiers de configuration pour webpack, vous devez aller dans le dossier node-modules et trouver le répertoire react-scripts. Selon la version de la librairie, vous devriez trouver le dossier config ; ce dossier contient tous les fichiers de configuration, y compris celui de webpack.

Modifier la configuration Webpack de create-react-app dans React

Le seul inconvénient de la configuration Webpack par défaut est qu’elle fait beaucoup d’hypothèses. Certains développeurs React souhaitent modifier la configuration par défaut du webpack de create-react-app.

Le projet de démarrage gère les modules externes et les bibliothèques en interne par défaut, de sorte que le fichier package.json semble propre.

Ce comportement par défaut est utile, mais il est parfois préférable d’afficher des informations complètes sur les modules. C’est là qu’intervient npm run eject.

Si vous lancez cette commande, les informations sur tous vos modules seront disponibles dans package.json. L’exécution de cette commande est nécessaire pour modifier la configuration Webpack de votre application.

À moins que vous ne sachiez ce que vous faites, exécuter npm run eject peut être assez risqué. Cependant, il est possible de modifier la configuration du webpack de votre application sans l’éjecter.

Pour ce faire, vous pouvez utiliser la bibliothèque appelée react-app-rewired. Pour obtenir plus d’informations sur la bibliothèque, lisez documents officiels.