webpack_cra

Sobre o projeto

Custom Webpack 5 Config for React Applications.

Assim como o projeto esbuild_cra este projeto é uma tentativa de opção ao famoso create-react-app criado com a intenção de estudar possibilidades, diminuir quantidade de dependências e buscar mais controle sobre o build de aplicações em React.

Tecnologias

Os papéis de algumas dependências:

• @babel/core - dependência principal do Babel;
• @babel/preset-env - configuração do Babel usada para transformar ES6+ em código ES5 compatível com browsers. Opcionalmente configura poyfills para browsers automaticamente;
• @babel/preset-react - configuração utilizada para transformar JSX e React class syntax em código JavaScript válido;
• @testing-library/jest-dom - Conjunto de métodos auxiliares para testar o DOM (toBeNull, toBeDefined, toBeFalsy, entre outros);
• @testing-library/react - Pacote que possui um conjunto de APIs para possibilitar teste de componentes React e encorajar boas práticas;
• babel-loader - Transpila arquivos com Babel e webpack;
• clean-webpack-plugin - Plugin webpack para remover/limpar pasta de build;
• css-loader - Resolve imports de CSS;
• html-webpack-plugin - Gera arquivos HTML baseado em templates;
• identity-obj-proxy - Identity object utilizado para lidar com imports de CSS durante testes com Jest;
• jest - Framework de teste Javascript;
• mini-css-extract-plugin - Extrai CSS em arquivos separados;
• postcss - Adicionar vendors e prefixos para compatibilidade com browsers antigos. Caso você tenha necessidades específicas de suporte à determinados browsers e versões, é possível criar um arquivo na pasta raíz chamado .browserslistrc e adicionar regras;
• postcss-loader - Processa CSS com PostCSS;
• postcss-preset-env - configuração padrão para PostCSS;
• sass - Disponibiliza SASS via linha de comando e Node.js API;
• sass-loader - Lê SCSS e compila para CSS;
• webpack - dependência principal do webpack;
• webpack-cli - enable running webpack from the command line;
• webpack-dev-server - servidor de desenvolvimento que roda webpack automaticamente quando arquivos são modificados.

Como utilizar

Executando o projeto

1. Clone o repositório

2. Instale as dependências:

   • npm run install

3. Execute o projeto:

   • npm run start

4. Visite o endereço:

   • http://localhost:8080

Testes

• Rodar testes unitários

  • npm run unit

• Exibir estatísticas de cobertura de testes unitários

  • npm run coverage

Referências

• Webpack Docs
• taniarascia/webpack-boilerplate
• webpack Tutorial: How to Set Up webpack 5 From Scratch by Tania Rascia
• Webpack 5 Full Project Setup by Swashbuckling with Code
• Creating and Understanding a Basic Webpack 5 Setup by Swashbuckling with Code