webpack 4: what’s new?
O popular empacotador de aplicações web chegou a sua versão 4, vamos conhecer as atualizações mais importantes dessa versão
Neste artigo, irei apresentar as principais atualizações trazidas pela nova versão do bundler chamado Webpack. Como a própria documentação já descreve:
At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into one or more bundles.
Instalação:
Primeiramente, vamos instalar o Webpack, podemos fazer isso usando o Yarn ou npm:
Yarn:yarn global add webpack webpack-cli
npm:npm install -g webpack webpack-cli
Zero confirgurações + mode 🚀
Até a última versão, era comum haver dois arquivos de configurações para o webpack, como sabemos um projeto típico pode ter:
- Um arquivo de configuração para desenvolvimento, para definir o servidor webpack e outras coisa
- Um arquivo de configuração para produção, para definir UglifyJSPlugin, sourcemaps e assim por diante
Mas com a versão atual, isso não se torna obsoleto, alguns projetos maiores ainda podem precisar de 2 arquivos, embora com o webpack 4 seja possível obter o mesmo comportamento sem uma única linha de configuração.
Esta versão introduziu uma nova propriedade para configuração, chamada de mode, que permite, de modo simples, a definição de ambiente que você está trabalhando, são elas: production, development, none.
Podemos configurar isso da seguinte forma:
Abra o package.json e preencha a seção do script da seguinte forma:
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
}Enquanto o mode de desenvolvimento é otimizado para velocidade e não faz nada além de fornecer um pacote não reduzido, o de produção, por outro lado, permite todos os tipos de otimizações prontas para uso. Incluindo minification, correção de hoisting, tree-shaking e muito mais.
🔬WebAssembly Support :discover
WebAssembly (wasm) é um novo formato portátil e eficiente em termos de carga, adequado para compilação na web. É muito rápido e a comunidade de desenvolvedores está o adotando rapidamente. Por este motivo, o Webpack 4 agora suporta o WebAssembly por padrão. No Webpack 4, você pode importar e exportar qualquer módulo local do WebAssembly. E você pode escrever loaders que permitam importar C++, C e Rust.
FAST build (até 98% mais rápido) 💨
Os tempos de compilação do Webpack 4 agora são até 98% mais rápidos do que a versão principal anterior. Essa foi uma das principais prioridades que o Webpack teve no lançamento dessa versão.
Surpote a versões do Node.js 4 📦
Como dito na nota de lançamento oficial, dentro da sessão de grandes mudanças, foi anunciado que o versão Node.js 4 não será mais suportada. O próprio criador do Webpack sugere aos usuários que usem o Node >= 8.9.4 para obter um superior desempenho, graças aos novos recursos do JavaScript agora usados na base de código.
Suporte para vários tipos de módulos 🆕
O Webpack 4 agora suporta cinco tipos de módulos, são eles:
javascript/auto— O Webpack 3 oferece esse tipo de módulo como padrão, com suporte a todos os sistemas de módulos JS ativados, CommonJS, AMD e ESM.javascript/esm— Módulos ESM (EcmaScript). Todos os outros módulos são desativados.javascript/dynamic— Suporta apenas CommonJS e AMD.json— Suporta apenas dados JSON, está disponível viarequireeimport.webassembly/experimental— Suporta os módulos WebAssembly. Por enquanto, é tido como experimental.
É importante salientar que o Webpack agora procura as extensões para importar seguindo a seguinte sequência:
# Sequência de importação
.wasm => .mjs => .js => .jsonComunsChunkPlugin ⤵ / SplitChunksPlugin ⤴️ ️
O famoso CommonsChunkPlugin foi removido e substituído por duas novas APIs chamadas optimize.splitChunks e optimization.runtimeChunk.
Essa nova API automaticamente identifica os 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 do diretório node_modules. Esta é uma mudança total do paradigma usado até então. Para saber mais, você pode ler o artigo oficial do Tobias Koppers.
Concluindo :finally {
A diversas novidades na versão 4 do Webpack que podem trazer benefícios as aplicações atuais, mas há muitos recursos e melhorias que ainda estão sendo adicionadas ao ecossistema e na API padrão do Webpack. Inclusive, já há um plano para o que deve ser lançado na versão 5 Webpack. Algumas dessas boas novidades são:
- Módulos HTML/CSS (usando arquivos
.htmle.csscomo pontos de entrada) - Cache persistente
- Multi-threading e Multicore
- Suporte total ao WebAssembly (removendo o modo experimental)
Se você tiver interesse em saber mais sobre a versão atual ou os planos para a nova versão, não deixe de conferir as notas das novas versões no repositório do Webpack no GitHub.
Referências
Seguem abaixo alguns links úteis nos quais é possível obter mais informações sobre a versão atual ou os planos para a nova versão do Webpack. Confere lá:
