Adicionando Hot Reloading e CSS Loading

Índice

• Parte 1 - Criando um ambiente mínimo para React
• Parte 2 - Adicionando Hot Reloading e CSS Loading

Conteúdo

• Introdução
• Adicionando o WebpackDevServer
• Adicionando loading de CSS á página
• Finalizando

Introdução

Olá e seja bem vindo novamente ao Pipoca Cafeinada, hoje teremos Web com React, melhorando o nosso ambiente mínimo para react, adicionando css loading e hot module replacement á um servidor de desenvolvimento do webpack, melhorando muito a nossa experiência de desenvolvimento.

Caso queira seguir este tutorial, siga os passos da primeira parte ou clone o repositório do resultado do primeiro post aqui.

Adicionando o WebpackDevServer

Vamos adicionar uma nova dependência ao nosso projeto, o webpack-dev-server, com ele podemos criar um servidor de desenvolvimento local que nos ajudará muito a desenvolver o nossas aplicações, então instale ele:

npm install --save-dev webpack-dev-server

Então alteraremos o webpack.config.js para configurarmos nosso servidor webpack, para que tenha um port diferente, sempre seja aberto automaticamente no navegador, tenha Hot-reloading ativado e acesse o nosso conteúdo, para isso coloque o seguinte código logo depois da propriedade module:

//...
module {
    //...
},
devServer: {
    port: 9000,
    hot: true,
    open: true,
    contentBase: 'dist'
}
//...

E modifique o package.json para que tenha um novo NPM Script para que execute o nosso servidor de desenvolvimento webpack:

//...
"scripts": {
    "build": "webpack --mode production",
    "start": "webpack-dev-server"
}
//...

Agora, quando rodarmos o script start no nosso projeto, irá ser iniciado um servidor de desenvolvimento com Hot Reloading pro React!

npm start

Adicionando loading de CSS á página

Feito o servidor de desenvolvimento, agora falta algo muito importante para o nosso ambiente estar pronto para uso, hot reloading de CSS. Para isso nós usaremos loaders de css para webpack, que pegará todo o css que criarmos e o juntará á nossa aplicação final no arquivo dist/main.js. Então instale os 2 pacotes que precisaremos:

npm install --save-dev style-loader css-loader

Modifique a propriedade module no webpack.config.js para que use nossos novos loaders:

//...
module: {
    rules: [
        {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader"
            },
        },
        {
            test: /\.css$/,
            use: [ "style-loader", "css-loader" ]
        }
    ]
},
//...

Feito isso, precisaremos de arquivos css para a nossa aplicação, então crie a pasta css dentro de src e dentro dessa nova pasta crie o arquivo styles.css:

mkdir src/css
touch src/css/styles.css

Agora, para que nossa aplicação use os nossos estilos criados dentro de styles.css, precisamos o importar para algum ponto da nossa aplicação, então em index.js coloque o seguinte import:

//...
import App from './app.jsx';
import './css/styles.css';
//...

Isso importará o css para a nossa aplicação React e resultará em os estilos aparecerem no nosso bundle final, ou seja, será afetado pelo Hot Module Replacement!

Então rode o script start, acesse a página no navegador e em seu editor de texto modifique o componente app.jsx e o stylesheet styles.css, você perceberá que as alterações que fizer serão aplicadas na sua página aberta sem a necessidade de recarregar a página, o que será muito útil no desenvolvimento.

Um repositório com o resultado final do passo a passo deste post está disponível aqui.

Finalizando

É isso por hoje, espero que tire bastante proveito destas modificações no projeto, até a próxima!