Bundlers e Build Tools
Configuração e uso de Webpack, Vite, Rollup para bundling, otimização e build de projetos web modernos
- Level
- advanced
- Languages
- pt-br → pt-br
- Cards
- 54
- Markdown
- Bundlers e Build Tools (.md)
Flashcards (54)
| # | Front (Term / Question) | Back (Definition / Answer) | Example | Multiple-Choice Options |
|---|---|---|---|---|
| 1 | Como o Vite lida com arquivos estáticos? | O Vite serve arquivos estáticos diretamente da pasta 'public', permitindo acesso rápido durante o desenvolvimento. | ||
| 2 | O que é um bundler? | Um bundler é uma ferramenta que empacota vários arquivos de código em um único arquivo ou em um conjunto de arquivos otimizados para uso em produção. | ||
| 3 | O que é o 'output.filename' no Webpack? | A propriedade 'output.filename' no Webpack define o nome do arquivo de saída gerado, permitindo personalização e versionamento. | ||
| 4 | Como o Vite melhora a experiência de desenvolvimento? | O Vite melhora a experiência de desenvolvimento com um servidor local rápido e suporte a Hot Module Replacement (HMR), permitindo atualizações instantâneas. | ||
| 5 | Quais são os principais formatos de saída do Rollup? | Os principais formatos de saída do Rollup incluem 'esm' (ES module), 'cjs' (CommonJS) e 'umd' (Universal Module Definition). | ||
| 6 | O que são loaders no Webpack? | Loaders são transformadores que permitem que o Webpack processe arquivos de diferentes tipos, como JavaScript, CSS, imagens, entre outros. | ||
| 7 | Qual a diferença entre 'npm run build' e 'npm start'? | 'npm run build' gera a versão otimizada para produção, enquanto 'npm start' inicia o servidor de desenvolvimento. | ||
| 8 | Como o Webpack lida com arquivos JSON? | O Webpack lida com arquivos JSON nativamente, permitindo que sejam importados diretamente como módulos no código JavaScript. | ||
| 9 | Qual a diferença entre desenvolvimento e produção no Vite? | No desenvolvimento, Vite utiliza um servidor local com recarregamento rápido; na produção, ele gera arquivos otimizados para serem servidos. | ||
| 10 | Como o Rollup gera um bundle para múltiplos formatos? | O Rollup pode gerar bundles para múltiplos formatos configurando a propriedade 'output' com diferentes formatos e opções. | ||
| 11 | Como otimizar o bundle no Webpack? | Para otimizar o bundle no Webpack, utilize plugins como 'TerserPlugin' para minificação e 'MiniCssExtractPlugin' para extrair CSS em arquivos separados. | ||
| 12 | Qual a função do 'externals' no Rollup? | A propriedade 'externals' no Rollup permite especificar dependências que não devem ser incluídas no bundle, como bibliotecas externas. | ||
| 13 | Qual a principal função do Webpack? | A principal função do Webpack é agrupar módulos JavaScript e seus recursos, como CSS e imagens, em um ou mais arquivos de saída. | ||
| 14 | Como o Vite suporta Hot Module Replacement? | O Vite suporta HMR automaticamente durante o desenvolvimento, permitindo que alterações em módulos sejam refletidas instantaneamente na aplicação. | ||
| 15 | Como configurar o Vite para um projeto React? | Para configurar o Vite para um projeto React, instale o template 'vite-react' e execute o comando 'npm create vite@latest'. | ||
| 16 | Como o Vite utiliza ES modules? | O Vite utiliza ES modules para carregar arquivos de forma dinâmica durante o desenvolvimento, permitindo um recarregamento rápido e eficiente. | ||
| 17 | Como o Rollup melhora a performance de bibliotecas? | O Rollup gera um código mais limpo e otimizado, eliminando dependências desnecessárias e permitindo a importação de módulos de forma eficiente. | ||
| 18 | Quais são os principais benefícios do uso de bundlers? | Os principais benefícios incluem a redução do número de requisições HTTP, otimização de arquivos, suporte a módulos e melhor gerenciamento de dependências. | ||
| 19 | Qual a diferença entre 'import' e 'require'? | 'import' é uma sintaxe de ES modules, enquanto 'require' é uma função do CommonJS, usada principalmente em Node.js. | ||
| 20 | O que é o 'devServer' no Webpack? | O 'devServer' é uma ferramenta que fornece um servidor de desenvolvimento com recarregamento automático, facilitando o desenvolvimento de aplicações. | ||
| 21 | O que é o 'alias' no Webpack? | O 'alias' no Webpack permite criar atalhos para caminhos de importação, facilitando a organização e a legibilidade do código. | ||
| 22 | Qual é a função do 'entry' no Webpack? | A propriedade 'entry' no Webpack define o ponto de entrada do aplicativo, onde o bundler começa a construir a árvore de dependências. | ||
| 23 | Como o Webpack lida com arquivos CSS? | O Webpack pode usar loaders, como o 'style-loader' e 'css-loader', para processar e incluir arquivos CSS no bundle final. | ||
| 24 | Como configurar variáveis de ambiente no Webpack? | Para configurar variáveis de ambiente no Webpack, use o plugin 'DefinePlugin' para definir variáveis que podem ser acessadas no código. | ||
| 25 | O que é Hot Module Replacement (HMR)? | HMR é uma técnica que permite atualizar módulos em uma aplicação em execução sem recarregar a página, melhorando a eficiência do desenvolvimento. | ||
| 26 | O que é Vite? | Vite é uma ferramenta de construção que oferece um ambiente de desenvolvimento rápido e otimizado, utilizando ES modules para carregamento de módulos. | ||
| 27 | O que é Rollup? | Rollup é um bundler focado em JavaScript que utiliza uma abordagem de árvore de dependências para gerar pacotes otimizados, ideal para bibliotecas. | ||
| 28 | Como o Webpack lida com fontes? | O Webpack pode usar loaders como 'file-loader' para processar e incluir fontes no bundle, garantindo que sejam acessíveis na aplicação. | ||
| 29 | Como o Vite lida com dependências? | O Vite pré-carrega dependências durante o desenvolvimento, utilizando cache para melhorar a performance e o tempo de carregamento. | ||
| 30 | O que é o 'watch' no Webpack? | O 'watch' no Webpack é uma opção que permite monitorar alterações nos arquivos e recompilar automaticamente quando mudanças são detectadas. | ||
| 31 | Como o Vite lida com CSS? | O Vite suporta CSS nativo, permitindo importações diretas e suporte a preprocessadores como Sass e Less através de plugins. | ||
| 32 | O que é tree shaking? | Tree shaking é uma técnica de otimização que remove código não utilizado de um bundle, reduzindo seu tamanho e melhorando o desempenho. | ||
| 33 | O que são plugins no Webpack? | Plugins no Webpack são ferramentas que permitem estender suas funcionalidades, como minificação, otimização de imagens e gerenciamento de variáveis de ambiente. | ||
| 34 | Como configurar o Rollup para um projeto React? | Para configurar o Rollup para um projeto React, instale plugins como 'rollup-plugin-babel' e 'rollup-plugin-node-resolve' e configure-os. | ||
| 35 | Como o Vite melhora o tempo de inicialização do projeto? | O Vite melhora o tempo de inicialização ao usar um servidor de desenvolvimento que não precisa empacotar todos os arquivos de uma vez. | ||
| 36 | Como o Webpack lida com imagens? | O Webpack pode usar loaders como 'file-loader' ou 'url-loader' para processar e otimizar imagens, incluindo-as no bundle final. | ||
| 37 | Qual a função do 'babel' em projetos com bundlers? | O Babel é usado para transpilar código JavaScript moderno para versões compatíveis com navegadores mais antigos, garantindo compatibilidade. | ||
| 38 | Como usar o 'terser-webpack-plugin'? | O 'terser-webpack-plugin' é usado no Webpack para minificar o código JavaScript, reduzindo o tamanho do bundle final. | ||
| 39 | Como configurar o Webpack para usar TypeScript? | Para usar TypeScript com Webpack, instale 'ts-loader' e configure-o no arquivo 'webpack.config.js' para transpilar arquivos .ts. | ||
| 40 | Qual a importância do 'index.html' em projetos Vite? | O 'index.html' é o ponto de entrada da aplicação Vite, onde os scripts e estilos são injetados automaticamente durante o build. | ||
| 41 | Como configurar um projeto básico com Webpack? | Para configurar um projeto básico com Webpack, crie um arquivo 'webpack.config.js', instale as dependências necessárias e defina as entradas e saídas. | ||
| 42 | Como o Rollup lida com dependências externas? | O Rollup permite marcar dependências externas para que não sejam incluídas no bundle, facilitando a criação de bibliotecas reutilizáveis. | ||
| 43 | O que é um 'plugin' no Vite? | Um plugin no Vite é uma extensão que adiciona funcionalidades, como suporte a TypeScript, PWA, ou integração com frameworks como Vue e React. | ||
| 44 | O que é o 'serve' no Vite? | 'serve' no Vite é o comando que inicia o servidor de desenvolvimento, permitindo que a aplicação seja testada localmente. | ||
| 45 | Como usar o 'babel-loader' no Webpack? | Para usar o 'babel-loader' no Webpack, instale-o e configure-o no arquivo 'webpack.config.js' para transpilar código JavaScript moderno. | ||
| 46 | O que é o 'splitChunks' no Webpack? | 'splitChunks' é uma configuração do Webpack que permite dividir o código em vários arquivos, melhorando o carregamento e a performance. | ||
| 47 | Como o Rollup gera um bundle otimizado? | O Rollup gera um bundle otimizado analisando a árvore de dependências e eliminando código não utilizado, resultando em um arquivo menor. | ||
| 48 | Qual a importância do 'package.json' em projetos com bundlers? | O 'package.json' é importante porque define as dependências do projeto, scripts de build e configurações necessárias para o bundler. | ||
| 49 | O que é o 'output' no Webpack? | A propriedade 'output' no Webpack define onde e como os arquivos gerados devem ser salvos, incluindo o nome e o caminho do diretório. | ||
| 50 | Quais são os tipos de saída que o Webpack pode gerar? | O Webpack pode gerar arquivos JavaScript, CSS, imagens e outros tipos de recursos, dependendo da configuração e dos loaders/plugins utilizados. | ||
| 51 | Qual a função do 'mode' no Webpack? | A propriedade 'mode' no Webpack define o ambiente de construção, podendo ser 'development' ou 'production', afetando otimizações. | ||
| 52 | O que é o 'build' no Vite? | O 'build' no Vite é o comando que gera a versão otimizada da aplicação para produção, incluindo minificação e otimização de recursos. | ||
| 53 | O que é o 'publicPath' no Webpack? | O 'publicPath' no Webpack define a URL base para todos os recursos gerados, permitindo que sejam carregados corretamente em produção. | ||
| 54 | Qual a função do 'resolve' no Webpack? | A propriedade 'resolve' no Webpack define como o bundler deve resolver módulos e arquivos, incluindo extensões e aliases. |