Reagisci con Webpack 5
A partire da luglio 2021, create-react-app utilizza Webpack 4 . Sfortunatamente, significa che dobbiamo installare le dipendenze e configurare noi stessi il processo di compilazione per sperimentare con Webpack 5. Questa è una guida rapida per migrare i progetti creati con create-react-appWebpack 5.
1. Crea un nuovo progetto/Utilizza uno esistente
npx create-react-app reactw5
Se eri solito create-react-appinizializzare il progetto, gestisce immediatamente il raggruppamento, la transpililazione e altre ottimizzazioni. Ma questa configurazione utilizza Webpack 4 e non ha alcuna utilità per noi con Webpack 5. È necessario installare Webpack 5 insieme ad altri strumenti e configurarli.
Dipendenze del pacchetto Web
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. Creare webpack.config.jsil file nel livello principale.
Ora che abbiamo Webpack 5, abbiamo bisogno di una configurazione personalizzata per farlo funzionare.
*** Questa non è affatto una configurazione pronta per la produzione. Potrebbe essere necessario gestire dattiloscritti, pre/post processori CSS e altre ottimizzazioni in base alle proprie esigenze. Ma si spera abbastanza per iniziare ***
4. Creare babel.config.jsonil file nel livello principale.
Abbiamo installato un sacco di plugin babel per aiutarci con React. configuriamoli.
5. Infine, aggiorna package.jsonil file.
Ora che abbiamo configurato Webpack e Babel, dobbiamo sostituire i nostri script NPM.
Dovresti essere in grado di avviare l'applicazione conyarn start
La tua app React ora utilizza il webpack 5. Saluti!
Suggested posts
Evitare le conseguenze devastanti di un ictus: imparare dal viaggio di una famiglia.
Introduzione Un ictus è un'emergenza medica che può colpire chiunque in qualsiasi momento. Si verifica quando il flusso sanguigno verso una parte del cervello viene interrotto, portando a un'improvvisa perdita della funzione cerebrale.
Jest: un potente framework di test JavaScript
Il test è una parte essenziale dello sviluppo del software. Assicura che il codice sia affidabile, funzioni come previsto e riduce la probabilità di errori.
Related posts
La persecuzione dei cristiani: il crimine d'odio di cui non parliamo
Dimentica l'islamofobia: i cristiani (e gli ebrei) sono le principali vittime dei crimini di odio religioso.
Qualsiasi mente razionale sa che i circoli politici e mediatici sono dominati dalla sinistra, anche dall'estrema sinistra, uno stato di cose che crea uno squilibrio nel discorso politico. Nel campo della religione, questo squilibrio è chiaramente visibile: giornali e reti di sinistra non si affrettano a difendere la fede cristiana.
3 modi comprovati per migliorare la tua abilità di scrittura
I vantaggi della scrittura e le strategie per aiutarti a farlo
Nel 2022, con il rilascio di GPT-3, l'abilità di scrittura sembra diventare meno importante. Con l'intelligenza artificiale, anche le persone con una scrittura scadente possono generare personale di qualità.