Configurando Webpack + ES6/7

Published in

criciumadev

3 min readNov 23, 2017

Fala pessoal! Muita gente me pergunta como configurar o webpack para desenvolver ES6/7, então aqui vai!

cd path_to_your_projetcs
mkdir my_cool_project
cd my_cool_project
npm init -y
npm install --save-dev webpack babel-core babel-loader babel-preset-es2015 babel-preset-stage-0 webpack-dev-server html-webpack-plugin

webpack: o nome já diz tudo, vamos adicionar o task runner ao projeto;
babel-core babel-loader babel-preset-es2015 babel-preset-stage-0: adicionamos os parses do ES6/ES7, para que o browser entenda o que fazer;
webpack-dev-server: um servidor http para utilizarmos o hot reloading.

O hot reloading mantém a sua aplicação rodando e injeta a uma nova versão do aquivo editado em tempo de execução. Desta forma você não perde o estado da sua aplicação.

html-webpack-plugin: injeta o bandle gerado pelo webpack em nosso index.html

Falando em index.html!

path_to_your_projetcs/my_cool_project/public/index.html

<!DOCTYPE html>
<html lang=”pt_BR”>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My cool project</title>
  </head>
  <body>
    <div id=”app”></div>
  </body>
</html>

Acabamos de instalar os módulos necessários para trabalharmos com o webpack, ainda falta criar o arquivo de configuração dele.

Crie o arquivo webpack.config.js na raiz do seu projeto com o seguinte conteúdo:

path_to_your_projetcs/my_cool_project/webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({ template: './public/index.html' });module.exports = {
  entry: './src/main.js',
  output: {
    filename: './public/assets/js/bundle.js'
  },
  module: {
    loaders: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      query: {
        presets: ['es2015', 'stage-0']
      }
    }]
  },
  plugins: [HTMLWebpackPluginConfig]
};

Uma pequena explicação do que está configuração vai fazer por nós:

var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({ template: './public/index.html' });

Instância do objeto HtmlWebpackPlugin para que o webpack injete nosso bundle automaticamente no template indicado.

entry: './src/main.js'

Ponto de entrada para nossa aplicação.

output: {
  filename: './public/assets/js/bundle.js'
}

Local do arquivo de saída.

loaders: [{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'babel-loader',
  query: {
    presets: ['es2015', 'stage-0']
  }
}]

Aqui é onde a magica acontece, é onde o webpack vai transpilar todo o nosso código ES6/ES7 em JS que o browser possa entender. Em presets indicamos quais o módulos utilizar para essa transpilação.

E finalmente:

plugins: [HTMLWebpackPluginConfig]

Fazemos com que o webpack use o plugin para que injeta o bundle no index.html.

Já estamos com o webpack pronto para o nosso desenvolvimento, mas como fazer isso funcionar? Fácil! No package.json, na chave “scripts”, adicionamos uma nova chave:

“start”: “webpack-dev-server --inline --hot --content-base ./public”

Agora, no terminal, basta executar o npm start, que será iniciado um servidor na porta 8080 com hot reloading!

Abra o seu browser em http://localhost:8080.

Edite o arquivo src/main.js:

const myfunc = () => “Hello World!”;
document.querySelector(“#app”).innerText = myfunc();

E veja o que acontece!!!

Assim terminamos de configurar nosso ambiente para o desenvolvimento. É bem simples, mas vejo muita gente com dúvidas em como fazer esse bootstrap inicial, e as vezes até perdendo o ânimo de continuar os estudos.

Referências:
https://webpack.github.io/
https://babeljs.io/

É isso ai pessoal, espero que tenham gostado e até a próxima!

Configurando Webpack + ES6/7

Written by Mateus Paegle