close

Webpack Guia para Iniciantes

Webpack é uma ferramenta altamente útil no desenvolvimento web moderno, auxiliando no gerenciamento de recursos e na otimização de projetos. Aqui está um guia básico para iniciantes sobre como usar Webpack:

Instalar Webpack

Em primeiro lugar, instale o Node.js, caso ainda não o tenha feito. Em seguida, crie um diretório para o seu projeto e abra uma janela Terminal/Prompt de comando nesse diretório. Execute os seguintes comandos para instalar Webpack e webpack-cli(interface de linha de comando do Webpack):

npm install webpack webpack-cli --save-dev

Criar Webpack configuração

Crie um arquivo nomeado webpack.config.js na raiz do diretório do seu projeto. É aqui que você configurará o Webpack.

const path = require('path');  
  
module.exports = {  
  entry: './src/index.js', // Entry point of your application  
  output: {  
    filename: 'bundle.js', // Output file name  
    path: path.resolve(__dirname, 'dist') // Output directory  
  }  
};

Criar pastas e arquivos

Crie uma src pasta no diretório raiz e, dentro dela, crie um arquivo nomeado index.js para servir como o arquivo principal do seu aplicativo.

Correr Webpack

Abra um Terminal e execute o seguinte comando para compilar seu código-fonte usando Webpack:

npx webpack

Após executar este comando, Webpack seguirá a configuração, compilará o index.js arquivo e criará um arquivo de saída nomeado bundle.js no dist diretório.

Usar em HTML

Crie um arquivo HTML no dist diretório ou no local de sua preferência e vincule-o ao bundle.js arquivo:

<!DOCTYPE html>  
<html>  
<head>  
  <title>Webpack App</title>  
</head>  
<body>  
  <script src="bundle.js"></script>  
</body>  
</html>

Execute o aplicativo

Abra o arquivo HTML em seu navegador e verifique se seu aplicativo está funcionando.

Este é apenas um guia básico. Webpack tem muitos recursos poderosos, como manipulação de CSS, gerenciamento de módulos, uso de carregadores e plug-ins, otimização de código-fonte e muito mais. Explore a documentação oficial Webpack para aproveitar ao máximo os recursos dessa ferramenta.