Image for post
Image for post
Imagem do dashboard de ambiente que será explicado ao final desta parte do tutorial.

Configurações avançadas do projeto e customização do ambiente em modos de desenvolvimento e produção.

(。◕‿‿◕。)

Esta é a segunda e última parte de um tutorial sobre como configurar um ambiente avançado utilizando Webpack 4.

Para voltar à Parte 1, clique no link abaixo.

1. Configurando o Babel

O Babel permite que possamos escrever nosso código utilizando um JavaScript mais moderno e ele fará a conversão para um JavaScript suportado por versões mais antigas dos browsers.

$ npm i --save-dev @babel/core @babel/preset-env babel-loader

Aqui nós estamos instalando: o core do compilador do Babel @babel/core, o @babel/preset-env, que soluciona a questão das versões do JavaScript e o babel-loader, responsável por realizar a “tradução” dos códigos (chamado transpiling). …


Image for post
Image for post
Imagem retirada do site webpack.js.org.

O Webpack é um module bundler e representa uma das estratégias de programação para Front End.

O module bundler é um “empacotador” de módulos para aplicações JavaScript mais atuais. Ele processa seu projeto e constrói um grafo de dependências que mapeia todos os pacotes dos quais ele depende. Ao final do processo, gera um ou mais pacotes estáticos compilados.

Acesse o código fonte do tutorial e utilize para comparação:

Assim ficará o nosso projeto ao final do tutorial:

Image for post
Image for post

( ͡° ͜ʖ ͡°)_/¯ Veja:

Para melhor organização, o tutorial foi dividido em 2 partes:

Parte 1: Preparação e configurações básicas

  1. Preparação do ambiente Node.js;
  2. Edição e gerenciamento de códigos;
  3. Criando um novo projeto Node.js;
  4. Instalando o Webpack 4;
  5. Configurações básicas do Webpack;
  6. Executando o build do projeto;
  7. Bônus: Limpando a bagunça;

Parte 2 : Configurações avançadas do ambiente

  1. Configurando o…

About

Rafael Goulart

UXE, Sr. Software Engineer, Web maniac, and CTO at Residuall.

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