Conceitos iniciais e configurações Babel e Webpack

Código da aula 01 - Configurações de Babel/Webpack

Pré-requisitos:

Dependencias

Principais

React: Biblioteca para construção de interfaces.
react-dom: Integração do React com a DOM (Arvore de elementos).
Babel: Conversor (Transpilador) de código Javascript moderno para versões compatíveis com navegadores e ambientes mais antigos.
Webpack: Responsável por criar o bundle e "ensinar" ao Javascript como importar CSS, Imagens e outros arquivos (usando loaders).
Webpack Dev Server: Responsável pelo Live Reload em ambiente de desenvolvimento.

Loaders

Faz o pre-processamento dos arquivos e permite gerenciar arquivos que não são Javascript.

babel-loader: Permite converter arquivos Javascript usando Babel.
style-loader: Injeta o código CSS na DOM.
css-loader: Responsável por ler o arquivo css e interpretar as importações.
file-loader: Responsável por interpretar arquivos (por exemplo: imagens).

Presets

Conjunto de configurações criadas por terceiros que podemos reaproveitar nos nossos apps.

preset-env: Responsável por converter o código do javascript mais moderno para um código mais antigo baseado no ambiente da aplicação.
preset-react: Responsável por adicionar as funcionalidades do React na conversão.

Comandos para criar a aplicação

# Inicie um projeto NodeJS
$ npm init -y
# ou
$ yarn init -y

# Instale as dependencias principais
$ npm install --save react react-dom
# ou 
$ yarn add react react-dom

# Instale as dependencias do Babel
$ npm install --save @babel/core @babel/cli @babel/preset-env @babel/preset-react
# ou 
$ yarn add @babel/core @babel/cli @babel/preset-env @babel/preset-react

# Instale as dependencias do Webpack
$ npm install --save webpack webpack-cli webpack-dev-server
# ou 
$ yarn add webpack webpack-cli webpack-dev-server

# Instale os loaders do webpack
$ npm install --save babel-loader style-loader css-loader file-loader
# ou 
$ yarn add babel-loader style-loader css-loader file-loader

# Execute a aplicação para ambiente de desenvolvimento
$ npm run webpack serve --mode development
# ou 
$ yarn webpack serve --mode development

# Execute a aplicação para produção
$ npm run webpack --mode production
# ou 
$ yarn webpack --mode production

Configuração do Babel (babel.config.js)

module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react'
  ]
}

Configuração do Webpack (webpack.config.js)

const path = require('path')

module.exports = {
  entry: path.resolve(__dirname, 'src', 'index.js'),
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'public')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' }
        ]
      },
      { 
        test: /.*\.(gif|png|jpe?g|svg$)/i,
        use: {
          loader: 'file-loader'
        }
      }
    ]
  }
}

anapolima/react-conceitos-alphaedtech-01