# Configurando Webpack para escrever JS com ES6/2015 no navegador

Você pode usar Webpack ao invés do Grunt ou Gulp. Ele é um módulo {bundler} que, sem plugins, te ajuda a usar módulos módulos da AMD ou CommonJS de forma mais fácil.

### Primeiros passos
* Instalar Webpak globalmente (você deve instalar o NodeJS anteriormente): 
```sh
[sudo] npm install -g webpack
```
* Depois disso, instale o webpack localmente, dentro do seu projeto:
```sh
npm install — save-dev webpack
```

### O arquivo webpack.config.js
* Crie um arquivo ‘webpack.config.js’ com o conteúdo a seguir:
```sh
module.exports = {
 entry: ‘main.js’,
 output: {
 filename: ‘bundle.js’
 }
};
```

É isso! O webpack está pronto pra ser usado. Agora, nós devemos criar nosso arquivo JS (`main.js`)
```sh
console.log(‘webpack está funcionando :) !’);
```

* Agora rode este comando no terminal:
```sh
webpack
```

Será gerado um arquivo `bundle.js` na raiz do seu projeto. Ele é o arquivo que você deverá adicionar no seu arquivo `index.html`.

Neste ponto, você pode usar AMD ou CommonJS normalmente dentro do seu arquivo `main.js`: require, define, module.exports, etc. Todos esses comandos vão funcionar bem.

### Instalando módulos do ES6/2015
* Agora, para usar ES6/2015, instale os pacotes a seguir:
```sh
npm i — save-dev babel-core babel-loader babel-preset-es2015 babel-preset-stage-0 webpack
```

* Se você utiliza ReactJS, instale também o ‘babel-preset-react’:
```sh
npm i — save-dev babel-preset-react
```

## Agora nós vamos alterar nosso arquivo ‘webpack.config.js’, adicionando algumas opções.

### Configurando webpack.config.js

* Primeiramente, nós adicionaremos source-maps, para debugar mais facilmente:
```sh
module.exports = {
 entry: ‘./app/main.js’,
 output: {
 filename: ‘bundle.js’
 },
 devtool: ‘source-map’
};
```

* Depois disso, nós adicionaremos uma diretiva ‘module’ para configurar o ES6 com Babel:
```sh
module.exports = {
 entry: ‘./app/main.js’,
 output: {
 filename: ‘bundle.js’
 },
 devtool: ‘source-map’,
 module: {
 }
};
```

* Agora nós precisamos adicionar a diretiva ‘loaders’, que irá carregar os módulas do Babel:
```sh
module.exports = {
 entry: ‘./app/main.js’,
 output: {
 filename: ‘bundle.js’
 },
 devtool: ‘source-map’,
 module: {
 loaders: []
 }
};
```

* Com os loaders, nós podemos adicionar configurações específicas, para tipos de arquivos específicos. Nossa primeira configuração será para todos os arquivos que terminam com ‘.js’:
```sh
module.exports = {
 entry: ‘./app/main.js’,
 output: {
 filename: ‘bundle.js’
 },
 devtool: ‘source-map’,
 module: {
 loaders: [
 {
 test: /\.js$/
 }
 ]
 }
};
```

Todas as vezes em que o webpack encontrar um arquivo ‘.js’, a configuração dentro daquele objeto será usado :)

* Agora, nós dizemos para o webpack que ele não deve procurar dentro do diretório ‘node_modules’:
```sh
module.exports = {
 entry: ‘./app/main.js’,
 output: {
 filename: ‘bundle.js’
 },
 devtool: ‘source-map’,
 module: {
 loaders: [
 {
 test: /\.js$/,
 exclude: /node_modules/
 }
 ]
 }
};
```

* E agora nós precisamos usar os ‘babel loaders’ para podermos usar ES6/2015:
```sh
module.exports = {
 entry: ‘./app/main.js’,
 output: {
 filename: ‘bundle.js’
 },
 devtool: ‘source-map’,
 module: {
 loaders: [
 {
 test: /\.js$/,
 exclude: /node_modules/,
 loader: ‘babel’,
 query: {
 presets: [‘es2015’, ‘stage-0’, ‘react’]
 }
 }
 ]
 }
};
```

A entrada ‘query’ é apenas para falar para o webpack o seguinte:

> Carregue `babel-preset-es2015`, `babel-preset-stage-0` and`babel-preset-react`

Nós podemos escrever:
```sh
module.exports = {
 entry: ‘./app/main.js’,
 output: {
 filename: ‘bundle.js’
 },
 devtool: ‘source-map’,
 module: {
 loaders: [
 {
 test: /\.js$/,
 exclude: /node_modules/,
 loaders: [‘babel-preset-es2015’, ‘babel-preset-stage-0’, ‘babel-preset-react’]

}
 ]
 }
};
```

que ele vai funcionar bem também.

Se você não usa ReactJS, apenas remova a última entrada.

E já era! Nós podemos rodar o Webpack usando:
```sh
webpack
```

Ou, se você quiser assistir cada alteração (watch):
```sh
webpack — watch
```

E o ES6/2015 está funcionando! Use tudo o que você quiser: import, export, class, arrow functions, let, const, spread operators, etc, etc, etc…

## Quer mais?

* Quer aprender mais sobre o webpack? Veja a documentação oficial: http://webpack.github.io/docs/

* Se você quiser aprender mais sobre o ES6/2015 e/ou Babel, você deve ler: http://babeljs.io/docs/learn-es2015/

> Atualização (Jan 09, 2016):

Dica do ChillyPenguin: Se você quer usar o ES6/2015 no seu aruqivo webpack config, apenas renomeie ele para `webpack.config.babel.js`, e instale o pacote babel-register:
```sh
npm i — save-dev babel-register
```

E é isso aí! Até mais!

Show your support

Clapping shows how much you appreciated Matheus Martins’s story.