webpack 4.0: O que há de novo?

A versão mais nova do onipresente empacotador web chegou!

Image for post
Image for post
O que há de novo no webpack 4.0?

Recentemente, a comunidade JavaScript recebeu uma grande novidade, uma grande atualização no fantástico empacotador de projetos webpack. A versão 4.0 chegou para todo mundo e oferece recursos robustos e grandes melhorias de performance, que deixará seu fluxo de desenvolvimento muito mais simples.

Caso você não saiba o que o webpack é, você pode conferir meu artigo anterior "Introdução ao webpack 2" e também, meus outros artigos relacionados ao webpack.

Dito isso, a seguir, iremos explorar algumas novidades e melhorias do webpack 4.

Índice

  1. Performance 🚀
  2. Surpote a versões do Node.js 📦
  3. A propriedade mode 🤖
  4. Plugins e Otimizações 🔌
  5. Novos tipos de módulos ✨
  6. #0CJS, o famoso "zero configuração" ✳️
  7. Outras novidades 🕶

1. Performance 🚀

Usar o webpack 4 ficou ainda mais rápido, uma garantia de até 98% de redução no tempo de compilação dos seus projetos, graças as melhorias internas de performance. Testei a versão 4 em projetos que usavam webpack 3 e vi uma redução de em torno de 2x no tempo de compilação.

Com isso, para realizar o mesmo no seu projeto, você deve instalar:

yarn add --dev webpack webpack-cli

Isso é tudo que você precisa para começar a usar a versão mais nova.

Abaixo, a diferença entre versões nos projetos que testei:

webpack 3.0: 1530ms 😱

Image for post
Image for post

webpack 4.0: 865ms 😎

Image for post
Image for post

2. Surpote a versões do Node.js 📦

Na nota de lançamento oficial, dentro da sessão "Grandes Mudanças", também foi anunciado que o versão Node.js v4 não será mais suportada. Essa decisão foi tomada para aproveitar ao máximo as vantagens e modernidade do ES6, resultando em um código mais limpo e robusto.

3. A propriedade `mode` 🤖

Essa é uma das grandes mudanças no webpack 4, a propriedade chamada mode , que permite, de modo simples, a definição de ambiente que você está trabalhando. As opções são development , production ou none .

Ao configurar mode para development , o webpack irá gerar recursos para seu ecosistema, que ofereçam a melhor experiência para desenvolvimento:

  • Ferramentas para debug no navegador
  • Comentários, dicas e mensagens de error detalhadas estarão habilitadas
  • Compilações otimizadas e incrementais

A opção production , configura as opções para um resultado final otimizado para realizar o deploy do seu projeto:

  • Configurações para a otimização de geração dos seus pacotes
  • Concatenação de módulos (Scope Hoisting)
  • Tamanho de arquivos finais menores
  • Exclusão de código que era apenas para desenvolvimento (DCE — dead code elimination)

Caso você não configure a propriedade mode , o webpack irá mostrar um alerta no seu terminal:

Image for post
Image for post
Alerta do webpack — Você PRECISA configurar a propriedade `mode`

Para definir essa propriedade, no seu webpack.config.js , você deve:

module.exports = {
mode: 'development'
}

ou

module.exports = {
mode: 'production'
}

Como falamos acima, existe também o valor none , que irá remover o alerta do webpack do seu terminal, caso você realmente saiba o que está fazendo, ~não~ é uma boa opção! 😉 🤔

4. Plugins e Otimizações 🔌

Algum tempo atrás, eu escrevi bastante sobre o CommonsChunkPlugin. No webpack 3, era através dele que poderíamos criar pedaços de códigos que seriam reutilizados entre vários pontos da nossa aplicação, ou até mesmo, fazer a divisão de código (code splitting) no nosso projeto. Sua API era complexa e, no início, sua documentação e exemplos eram bem ruins.

No webpack 4, esse plugin foi removido!!1 🔥😱🎉

Ele foi inteiramente substituído por uma nova API chamada optimization.splitChunks e optimization.runtimeChunk . Essa nova API automaticamente identifica módulos que devem ser divididos em pedaços usando uma heurística baseada na contagem de duplicação de módulos e na categoria de módulos da sua pasta node_modules . É uma mudança total de paradigma, para saber mais, você pode ler o artigo oficial do Sokra.

Isso significa que você terá pedaços gerados automaticamente para você. Alguns outros plugins também foram descontinuados, tais como:

  • NoEmitOnErrorsPlugin — Agora é optimization.noEmitOnErrors e é ativado por padrão em mode: production
  • ModuleConcatenationPlugin — Agora é optimization.concatenateModules .Também é ativado por padrão em mode: production
  • NamedModulesPlugin — Agora é optimization.namedModules e também é ativado por padrão em mode: production

Ou seja, sem nenhuma configuração, você já ganha melhorias extras por debaixo dos panos. Outra melhoria de desempenho para obter melhores resultados, é que agora, o UglifyJs armazena em cache e paraleliza a compilação por padrão no webpack 4.

5. Novos tipos de módulos ✨

No webpack 4, teremos o suporte para outros tipos de módulos, tais como:

  • javascript/auto — É o padrão do webpack 3. Todos os sitemas de módulos JS são ativados: CommonJS, AMD e ESM
  • javascript/esm — Módulos EcmaScript, ou ESM. Todos os outros módulos são desativados
  • javascript/dynamic — Somente módulos CommonJS.
  • json — Importação de JSON através de require e import
  • webassembly/experimental — Módulos WebAssembly (atualmente em modo experimental)

javascript/auto era o padrão no webpack 3, mas no webpack 4, uma abstração foi criada para disponibilizar aos usuários a mudança para o módulo que desejam.

Além disso, o webpack irá importar arquivos na seguinte sequência:

Sequência de importação:
.wasm => .mjs => .js => .json

Procurando essas extensões no arquivo importado.

6. #0CJS, o famoso “zero configuração” ✳️

A hashtag #0CJS significa que é possível usar uma ferramenta sem qualquer configuração, bastando fazer apenas a instalação. Essa é a premissa do empacotador Parcel. Você não precisa ter um arquivo de configuração para começar seu aplicativo.

Com a versão 4.0, o webpack agora tem uma convenção para isso. Ou seja, você não precisa criar um arquivo webpack.config.js .

Tudo o que você precisa fazer é ter um arquivo ./src/index.js e ao executar webpack , ele saberá qual arquivo é o ponto de entrada do seu aplicativo. Isso é bem útil para iniciar idéias ou pequenos projetos.

Image for post
Image for post
Ao ter o "src/index.js" você não precisa de configuração!

7. Outras novidades 🕶

  • O processo de eliminação de código (DCE — dead code elimination), é realizado pelo próprio webpack. Anteriormente isso era feito pelo UglifyJS
  • import() agora suporta os comentários mágicos webpackInclude e webpackExclude , isso permite filtrar quais expressões dinâmicas devem ou não ser incluídas no processo
  • Ao usar System.import() no seu código, você verá um alerta de erro recomendando o uso de import()
  • Melhorias de performance para RemoveParentModulesPlugin
  • Tags script não são mais text/javascript e async , esses eram os valores padrões (salvando alguns bytes)

Finalizando 👋

Essas são apenas algumas novidades do webpack 4. Muitos recursos e melhorias ainda estão sendo adicionadas ao ecosistema e na API padrão do webpack. Outras boas novidades são:

  • Módulos HTML/CSS. Você pode usar arquivos .html e .css como pontos de entrada
  • Cache persistente
  • Multi-threading e Multicore
  • Suporte total ao WebAssembly (removendo o modo experimental)

É um futuro excitante para o webpack e a comunidade JavaScript!

Você pode conferir as notas das novas versões no repositório do GitHub!

Créditos ⭐

  • What’s New in webpack 4, escrito originalmente por Yomi Eluwande
  • Modificação 1: Mencões ao npm removidas
  • Modificação 2: Em "4. Plugins e Otimizações", adicionado texto explicando a nova heurística utilizada pelo webpack 4

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store