web-dev-qa-db-fra.com

Build Webpack vs build react-scripts

Dites que la configuration du webpack est la suivante

{
    entry: path.join(__dirname, 'src', 'index.js'),
    output: {
    path: path.join(__dirname, 'build'),
    filename: 'bundle.js'
},

Maintenant, la construction à partir de webpack est

enter image description here

et la construction à partir de la construction de scripts de réaction (statique contient css, js et média dans des dossiers séparés)

enter image description here

Question : Existe-t-il un avantage spécifique du webpack par rapport à la construction de scripts de réaction? (y compris, mais sans s'y limiter, les performances)

[~ # ~] note [~ # ~] : package.json est modifié pour y parvenir.

reactjswebpackreact-scripts
8
magpie

Webpack est un bundler à usage général, avec des applications au-delà de React. Avant create-react-app, le Web regorge d'exemples de mise en place d'un tout nouveau projet React qui utilise webpack comme bundler. Il est extrêmement flexible et peut gérer des choses incluant et au-delà de ce qui React aurait besoin. Cela fonctionne pour Angular, Vue, NodeJS et même Web Assembly.

Mais cela prenait un certain temps à configurer. Vous devrez comprendre son fonctionnement et le configurer afin de pouvoir transpiler votre code React + ES6 en plan-Vanilla JS. Vous devrez décider de la structure de sortie que vous aimez et configurer le webpack pour cela. Et puis ajoutez vous-même le support de rechargement de module à chaud et de fractionnement de code. Pendant cela, vous devrez également ajouter d'autres plugins requis par Webpack pour prendre en charge tout ce qui précède :).

Cela a naturellement causé de la fatigue chez les personnes qui commençaient avec React.

Facebook a donc créé un cra qui utilise en interne le webpack, préconfiguré pour inclure tous les outils Nice pour prendre en charge ces bases et vous aider à vous concentrer sur la partie React de votre code. Il vous cache le webpack autant que possible, sinon le processus de construction peut se casser si la configuration est modifiée par l'utilisateur.

Avec cela mis à part, les conventions structurelles que cra utilise ne devraient pas avoir d'impact sur les performances par rapport à une configuration de webpack simple. C'est juste une convention.

Votre question devrait alors être, quand utiliserais-je create-react-app et quand utiliserais-je Webpack?

En tant que débutant, vous voudrez peut-être vous en tenir à l'application lorsque vous vous concentrerez sur votre application React. Finalement, il arriverait un moment où ce que vous voulez faire n'est pas pris en charge par la configuration du webpack que cra gère sous le capot. Un exemple très courant est si vous souhaitez écrire une bibliothèque de composants à réutiliser dans d'autres applications. Cela ne peut pas être fait par cra (il s'agit de l'application entière :)). Vous pouvez ensuite basculer vers webpack et commencer à l'apprendre.

14
hazardous

react-scripts cache toutes les configurations du webpack en arrière-plan. L'avantage est qu'il le rend plus propre et depuis create-react-app est régulièrement mis à jour, il est facile de rester à jour avec React, Webpack et Babel. La communauté résout automatiquement les problèmes pour vous.

En termes de performances, devrait être le même quel que soit le script de réaction ou le webpack.

Avantages d'exécuter uniquement Webpack:

  • Contrôle total de votre environnement

  • Peut faire des choses personnalisées comme le rendu côté serveur facilement (toujours possible avec create-react-app

  • Connaissance du webpack en tant que compétence

Inconvénients du webpack uniquement

  • Mise à jour et maintenance entièrement en charge du webpack (certaines versions du webpack ne sont pas rétrocompatibles ou futures)

  • Peut être intimidant et peut être un casse-tête si vous essayez d'apprendre à réagir rapidement.

Si vous souhaitez personnaliser create-react-app, voici quelques infos

https://auth0.com/blog/how-to-configure-create-react-app/

Voici le rendu côté serveur avec create-react-app

https://hackernoon.com/server-side-rendering-with-create-react-app-1faf5a9d1eff

TLDR: utilisez create-react-app/react-scripts si vous voulez passer au 0-100 le plus rapidement possible pour une raison quelconque

Utilisez simplement Webpack si vous aimez vous amuser sous le capot

8
Auriga