Imagine um cenário em que um site só é feito em HTML, CSS e JavaScript (JS), esse site começa a tomar proporções maiores do que imaginávamos, o arquivo JS que contém as funcionalidades começa a ficar gigantesco, começamos a criar arquivos JS para dividir cada funcionalidade, importamos cada script em uma ordem muito especifica no HTML.
Mas isso vai ficando enorme e cada deslize o site quebra, você pode ver que esse cenário pode ir de mal a pior e com isso ficando impossível de trabalhar.
Neste artigo, vamos falar como webpack pode melhorar nosso desenvolvimento e como ele é aplicado em um pequeno projeto que construí nesse post explicando a arquitetura Model View Controller (MVC).
Você pode clonar diretamente do GitHub já estruturado para iniciar a configuração do webpack.
O que é webpack?
Webpack nada mais é do que um empacotador de módulos, ele serve para que não tenhamos arquivos gigantescos e que podemos dividir eles tranquilamente sem ter necessariamente uma ordem especifica como comentei, ao invés disso podemos importar cada um em seu respectivo lugar que será usado. E tudo isso é compactado em uma pasta dist que é usada para quando o projeto estiver no ar 🎉
O que vai ter nesse projeto com Webpack configurado?
Esse projeto vai conter arquivos de configuração Babel que é um tradutor para JS mais moderno que traduz para um JS mais antigo que é suportado em vários navegadores, assim não precisamos nos preocupar em usar os recursos mais modernos do JS, além disso usando a arquitetura MVC. Muito bom, né? Sem mais delongas vamos sujar nossas mãos e configurar nosso projeto.
Criando um arquivo webpack.config.js
Na raiz do projeto, vamos criar um arquivo chamado webpack.config.js nele será configurado tudo que precisamos para ter o webpack no nosso projeto. Após criar o arquivo, vamos instalar o webpack. Em seu terminal digite o seguinte comando:
npm install webpack webpack-cli webpack-dev-server --save-dev
No comando contém 3 pacotes:
- webpack: instalará o webpack de fato;
- webpack-cli: fornece vários comandos para que podemos configurar o webpack personalizado;
- webpack-dev-server: isso nos ajudará no desenvolvimento, podendo assistir nossas mudanças no código com recarregamento automático.
Voltando no arquivo webpack.config.js, vamos colar o seguinte código:
const path = require("path");
module.exports = {
entry: "./src/js/index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "js/bundle.js",
},
devServer: {
static: {
directory: path.join(__dirname, "src"),
},
compress: true,
port: 9000,
},
},
};
Para entendermos o que está acontecendo aqui, primeiramente:
A propriedade entry é o ponto que define onde o projeto iniciará e está recebendo o arquivo principal index.js que é o nosso Controller da arquitetura MVC.
Já o output é onde definimos como será nossa saída depois do agrupamento dos arquivos, aqui estamos dizendo a propriedade path do objeto output para que crie uma pasta dist que terá um arquivo bundle dentro da pasta js que está sendo definido no filename.
E o devServer que nada mais é onde definimos a pasta em que o webpack fica olhando as mudanças que ocorre no desenvolvimento e reflete em nosso navegador fazendo o recarregamento após salvar o arquivo.
Configurando o Babel
Inicialmente, precisamos instalar o babel e alguns pacotes relacionados, em seu terminal digite:
npm install @babel/core @babel/preset-env --save-dev
- @babel/core: é onde contém as funcionalidades principais de todo o babel;
- @babel/preset-env: contém vários plugins que ajuda a traduzir nosso JS.
E em seguida precisamos instalar o polyfill do babel que irá ligar o babel com o webpack, no terminal digite:
npm install @babel/polyfill --save
Após instalar os pacotes, na raiz do projeto vamos criar um arquivo chamado .babelrc nele irá conter nossas configurações para traduzir o JS moderno para o mais antigo, no arquivo coloque:
{
"presets": [
["@babel/preset-env", {
"targets": {
/*
* Suporta as últimas 5 versões de cada navegador e certifica de que
* todas as versões do IE (a partir da 8) sejam compatíveis.
*/
"browsers": [
"last 5 versions",
"ie >= 8"
]
}
}]
]
}
A propriedade targets que contém a propriedade browsers diz para suportar as últimas 5 versões de cada navegador e certifica de que todas as versões a partir da 8 do Internet Explorer sejam compatíveis.
Agora vamos até o arquivo webpack.config.js que criamos e vamos acrescentar o polyfill do babel no na propriedade entry, ficando assim nosso arquivo:
const path = require("path");
module.exports = {
entry: ["@babel/polyfill", "./src/js/index.js"],
output: {
path: path.resolve(__dirname, "dist"),
filename: "js/bundle.js",
},
devServer: {
static: {
directory: path.join(__dirname, "src"),
},
compress: true,
port: 9000,
},
};
Instalando plugins
Os plugins no webpack é um facilitador para otimizar o nosso desenvolvimento em determinadas tarefas.
O primeiro que vamos instalar é o html-webpack-plugin que faz com que nosso HTML esteja na pasta de saída com os pacotes e com os arquivos usados já importados como o index.js no nosso arquivo HTML.
Em seu terminal, digite:
npm install html-webpack-plugin --save-dev
Em seguida, vamos instalar um plugin muito útil também que se chama mini-css-extract-plugin em conjunto com o css-loader:
npm install mini-css-extract-plugin css-loader --save-dev
- mini-css-extract-plugin: separa os arquivos CSS por arquivo JS que contém CSS;
- css-loader: usado para interpretar import, url(), require() em arquivos JS.
Agora vamos adicionar nossos plugins no nosso arquivo webpack.config.js:
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
/*...*/
plugins: [
new HtmlWebpackPlugin({
filename: "index.html", // Arquivo de saída em nossa pasta dist
template: path.resolve(__dirname, "./src/index.html"), // Nosso arquivo HTML do projeto
}),
new MiniCssExtractPlugin({
filename: "css/[name].css", // Arquivo de saída em nossa pasta dist
}),
],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
},
}
E no index.js importamos o nosso arquivo css:
import "../css/styles.css";
Scripts
No package.json, adicione os scripts:
"scripts": {
"build": "webpack --mode production", // Gera a pasta dist
"start": "webpack-dev-server --mode development --open" // Inicia a aplicação para o desenvolvimento
},
Agora vamos rodar um comando para gerar a pasta dist:
npm run build
E em seguida o comando para rodar nossa aplicação e abrir ela no navegador pelo endereço http://localhost:9000/:
npm start
Podemos ver a pasta dist que contém um HTML empacotado, pasta css com nosso arquivo main.css e a pasta js com nosso arquivo bundle.js apenas com recursos do JS suportados para os browsers que definimos no arquivo de configuração babel.
Conclusão
Criamos um arquivo de configuração para o webpack 5 simples, pronto para seu uso em produção, com Babel, MVC, otimização em produção e um servidor de desenvolvimento. Webpack tem muitas outras funcionalidades, mas esse artigo pode ser um começo, mas recomendo entrar em mais detalhes, um exemplo é como você pode implementar o SASS em seu projeto em conjunto com a configuração que utilizamos nesse post. Com isso, você tem uma bagagem para criar outras aplicações com Framework ou o que preferir 🤯😄
Agora divirta-se, qualquer dúvida, pode enviar no meu twitter que estarei por lá 🤗
Top comments (0)