Crie servidor de desenvolvimento com Webpack (Hot Reload) em React

Um dos recursos mais importantes ao desenvolver em React é poder testar nosso código no navegador sem compilar todas as alterações feitas. Para isso vamos recorrer à preparação do nosso projeto anterior: “Hello world in React + Babel + Webpack”

O que aprenderemos? Preparar nosso projeto para ter um servidor de desenvolvimento. Além disso, toda vez que você salva um arquivo após uma modificação, o servidor webpack atualizará automaticamente a janela do navegador.

Vamos atualizar nosso projeto, a primeira coisa que devemos fazer é instalar as dependências de desenvolvimento que o webpack requer para adicionar este recurso ao nosso projeto:

npm i webpack-dev-server --save-dev

Uma vez instaladas as dependências necessárias, em nosso arquivo package.json adicionaremos o seguinte script abaixo daquele que temos para compilar o projeto:

"start": "webpack-dev-server --open --mode development",

Salvamos e executamos o comando no terminal/console:

npm run start

O Webpack abrirá uma janela do navegador na porta 8080 do seu host local onde você poderá ver seu projeto pronto para teste. Além disso, se houver um erro, o console irá ajudá-lo exibindo uma mensagem.

Para concluir

Aprendemos a preparar nossos projetos com um servidor de desenvolvimento para agilizar nosso trabalho, otimizando o processo de compilação sempre que precisarmos salvar nosso código.

Se você quiser saber mais sobre este pacote e seus múltiplos usos, recomendo a leitura detalhada da documentação: Webpack DevServer”