Réagissez avec Webpack 5

Depuis juillet 2021, create-react-app utilise Webpack 4 . Malheureusement, cela signifie que nous devons installer des dépendances et configurer nous-mêmes le processus de construction pour expérimenter Webpack 5. Ceci est un guide rapide pour migrer les projets créés avec create-react-appvers Webpack 5.

1. Créer un nouveau projet/Utiliser un projet existant

npx create-react-app reactw5

Si vous aviez l'habitude create-react-appd'initialiser le projet, il gère pour vous le regroupement, la transpililation et d'autres optimisations. Mais cette configuration utilise Webpack 4 et n'a aucune utilité pour nous avec Webpack 5. Nous devons installer Webpack 5 avec d'autres outils et les configurer.

Dépendances Webpack

yarn add -D webpack webpack-cli webpack-dev-server html-webpack-plugin serve

yarn add -D babel-loader @babel/core @babel/preset-env @babel/preset-react

yarn add -D css-loader style-loader @svgr/webpack style-loader url-loader

3. Créez un webpack.config.jsfichier au niveau racine.

Maintenant que nous avons Webpack 5, nous avons besoin d'une configuration personnalisée pour le faire fonctionner.

*** Il ne s'agit en aucun cas d'une configuration prête pour la production. Vous devrez peut-être gérer des scripts dactylographiés, des pré/post processeurs CSS et d'autres optimisations en fonction de vos besoins. Mais j'espère assez pour vous aider à démarrer ***

4. Créez un babel.config.jsonfichier au niveau racine.

Nous avons installé un tas de plugins babel pour nous aider avec React. Configurons-les.

5. Enfin, mettez à jour le package.jsonfichier.

Maintenant que nous avons configuré Webpack et Babel, nous devons remplacer nos scripts NPM.

Vous devriez pouvoir démarrer l'application avec yarn start

Votre application React utilise désormais le webpack 5. À bientôt !