Instalação e configuração do Webpack

Agora, vamos instalar o webpack e algumas dependências. Para fazer isso, vamos executar comando:

$ yarn add webpack webpack-dev-server path

Dentro da pasta que criamos chamada react-padawan-to-jedi, um novo arquivo yarn.lock é criado. O yarn usa esse arquivo para bloquear ou "congelar" as versões exatas das dependências para serem usadas em outra máquina. Você não precisa se preocupar com esse arquivo, visto que ele é gerado automaticamente.

Agora que temos o webpack instalado, precisamos de um arquivo de configuração para registrar como desejamos que o nosso webpack seja configurado. Crie um novo arquivo, chamado webpack.config.js, no diretório de nosso projeto e o abra no editor.

Linux/MAC:

$ touch webpack.config.js

Windows:

> type NUL > webpack.config.js

Digite a seguinte configuração inicial:

const path = require('path');
module.exports = {
  entry  : './app/index.js',
  output : {
    path     : path.resolve('dist'),
    filename : 'index_bundle.js'
  },
  module: {
    loaders: [
      {
        test    : /\.js$/,
        loader  : 'babel-loader',
        exclude : /node_modules/ },
      {
        test    : /\.jsx$/,
        loader  : 'babel-loader',
        exclude : /node_modules/
      }
    ]
  }
};

Basicamente, para rodarmos uma instância do webpack nós precisamos especificar um ponto de entrada('entry') e um ponto de saída('output').

• entry: Especifica o arquivo de entrada onde o bundler inicia o processo de empacotamento.

• output: Especifica a localização que o código Javascript empacotado deve ser salvo.

Note que nesse arquivo também temos loaders. Esses loaders são necessários porque queremos que o browser que usamos seja capaz de interpertar e rodar código JSX(para o React) e código escrito em ES6.

• loaders: Esse são transformações que serrão aplicadas em nossos arquivos da aplicação.

A propriedade loaders recebe um array. Para nossa configuração básica, especificamos que o babel-loader analisa e transpila cada arquivo que termina com uma extensão .js ou .jsx excluindo os arquivos dentro da pasta node_modules. Você sempre pode adicionar mais loaders conforme necessário. Por exemplo, se você tivesse folhas de estilo separadas em seu projeto, você precisaria de um carregador CSS. Todos esses carregadores podem ser encontrados na documentação do webpack. Sinta-se livre para testá-los.