Reaja com o Webpack 5

A partir de julho de 2021, create-react-app usa Webpack 4 . Infelizmente, isso significa que temos que instalar dependências e configurar o processo de compilação por conta própria para experimentar o Webpack 5. Este é um guia rápido para migrar projetos criados com create-react-appo Webpack 5.

1. Crie um novo projeto/Use um existente

npx create-react-app reactw5

Se você costumava create-react-appinicializar o projeto, ele lida com agrupamento, transpililação e outras otimizações prontas para você. Mas esta configuração usa o Webpack 4 e não tem utilidade para nós com o Webpack 5. Precisamos instalar o Webpack 5 junto com outras ferramentas e configurá-las.

Dependências do 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. Crie webpack.config.jso arquivo no nível raiz.

Agora que temos o Webpack 5, precisamos de uma configuração personalizada para fazê-lo funcionar.

*** Esta não é de forma alguma uma configuração pronta para produção. Você pode precisar lidar com scripts datilografados, pré/pós processadores CSS e outras otimizações com base em suas necessidades. Mas espero o suficiente para você começar ***

4. Crie babel.config.jsono arquivo no nível raiz.

Instalamos vários plugins babel para nos ajudar com o React. Vamos configurá-los.

5. Por fim, atualize package.jsono arquivo.

Agora que configuramos o Webpack e o Babel, precisamos substituir nossos scripts NPM.

Você deve ser capaz de iniciar o aplicativo comyarn start

Seu aplicativo React agora usa webpack 5. Saúde!