Introdução ao Webpack [Com Exemplo de Projeto]

Webpack é um bundler de módulo que facilita a construção de aplicativos JavaScript complexos. Ele ganhou muita força desde que a comunidade React escolheu como principal ferramenta de construção. Webpack é nem um gerenciador de pacotes nem um executor de tarefas como ele usa uma abordagem diferente (mais avançada), mas seu objetivo também é configurar um processo de criação dinâmico.

O Webpack funciona com o JavaScript de baunilha. Você pode usá-lo para agrupar os recursos estáticos de um aplicativo, como imagens, fontes, folhas de estilo, scripts em um único arquivo cuidando de todas as dependências.

Você não precisará do Webpack para criar um aplicativo ou site simples, por exemplo, um que tenha apenas um JavaScript, um arquivo CSS e algumas imagens, mas pode ser um salva-vidas para um aplicação mais complexa com vários recursos e dependências.

Webpack vs. corredores de tarefas vs. Browserify

Então, como o Webpack se acumula em comparação com outras ferramentas de compilação como Grunt, Gulp ou Browserify?

Grunt e Gulp são corredores de tarefas. No seu arquivo de configuração, você especificar as tarefas, e o executor de tarefas os executa. o fluxo de trabalho de um executor de tarefas basicamente se parece com isso:

No entanto, o Webpack é um bundler de módulo que analisa todo o projeto, configura uma árvore de dependência, e cria um arquivo JavaScript agrupado que serve para o navegador.

O Browserify está mais próximo do Webpack do que dos executores de tarefas, cria um gráfico de dependência mas só faz isso para módulos JavaScript. O Webpack vai um passo além e não apenas agrega código-fonte, mas também outros ativos como imagens, folhas de estilo, fontes etc..

Se você quiser saber mais sobre como o Webpack se compara a outras ferramentas de compilação, Eu recomendo dois artigos:

1. Andrew Ray's Webpack: quando usar e por que em seu próprio blog
2. Cory House's Browserify vs Webpack no freeCodeCamp (com ilustrações impressionantes)

As duas ilustrações acima são do Materiais Webpack do manual Pro React, outro recurso que vale a pena olhar.

Quatro conceitos principais do Webpack

Webpack tem quatro principais opções de configuração chamadas “conceitos fundamentais” que você precisará definir no processo de desenvolvimento:

1. Entrada - a ponto de partida do gráfico de dependência (um ou mais arquivos JavaScript).
2. Saída - o arquivo onde você quer o saída para ser empacotado para (um arquivo JavaScript).
3. Carregadores - transformações nos ativos que transformá-los em módulos Webpack para que eles possam ser adicionado ao gráfico de dependência. Por exemplo, css-loader é usado para a importação de arquivos CSS.
4. Plugins - ações e funcionalidades personalizadas realizada no pacote. Por exemplo, o i18n-webpack-plugin incorpora a localização no pacote.

Carregadores trabalham em uma base por arquivo antes da compilação ocorrer. Plugins são executados no código empacotado, no final do processo de compilação.

Instalar o Webpack

Para instalar o Webpack, abra a linha de comando, navegue até a pasta do projeto e execute o seguinte comando:

 npm init 

Se você não quiser fazer a configuração sozinho, você pode fazer npm povoar o package.json arquivo com os valores padrão com o seguinte comando:

 npm init -y 

Em seguida, instale o Webpack:

 npm install webpack --save-dev 

Se você usou os valores padrão, é assim que o seu package.json o arquivo deve se parecer agora (as propriedades podem estar em uma ordem diferente):

 "name": "_tests", "version": "1.0.0", "description": "", "main": "webpack.config.js", "dependências": "webpack": "^ 3.6 .0 "," devDependencies ": " webpack ":" ^ 3.6.0 "," scripts ": " teste ":" echo \ "Erro: nenhum teste especificado \" && exit 1 "," palavras-chave ": []," author ":" "," license ":" ISC " 

Crie o arquivo de configuração

Você precisa criar um webpack.config.js Arquivo na pasta raiz do projeto. Este arquivo de configuração tem um papel central, pois é aqui que você definir os quatro conceitos principais (pontos de entrada, saída, carregadores, plugins).

o webpack.config.js Arquivo mantém um objeto de configuração de quais propriedades você precisa especificar. Neste artigo, vamos especificar as quatro propriedades que correspondem aos quatro principais conceitos (entrada, saída, módulo, e plugar), mas o objeto de configuração também tem outras propriedades.

1. Crie o (s) ponto (s) de entrada

Você pode ter um ou mais pontos de entrada. Você precisa defini-los no entrada propriedade.

Insira o seguinte trecho de código no webpack.config.js Arquivo. isto especifica um ponto de entrada:

 module.exports = entry: "./src/script.js"; 

Para especificar mais de um ponto de entrada, você pode usar a matriz ou a sintaxe do objeto.

Na pasta do seu projeto, crie um novo src pasta e um script.js arquivo dentro dele. Este será seu ponto de entrada. Para fins de teste, apenas coloque uma corda dentro dele. Eu usei o seguinte (no entanto, você também pode usar um mais interessante):

 const greeting = "Olá. Sou um projeto inicial do Webpack."; document.write (saudação); 

2. Defina a saída

Você pode ter apenas um arquivo de saída. O Webpack agrupa todos os recursos nesse arquivo. Você precisa configurar o saída propriedade da seguinte maneira:

 const path = require ("caminho"); module.exports = entry: "./src/script.js", saída: filename: "bundle.js", caminho: path.resolve (__ dirname, 'dist'); 

o nome do arquivo propriedade define o nome do arquivo incluído, enquanto o caminho propriedade especifica o nome do diretório. O exemplo acima criará o /dist/bundle.js Arquivo.

Embora não seja obrigatório, é melhor use o path.resolve () método quando você define o caminho propriedade, como garante uma resolução precisa do módulo (o caminho absoluto da saída é criado de acordo com diferentes regras em diferentes ambientes, a resolução do módulo resolve essa discrepância). Se você usar path.resolve, você precisa exigir a caminho Módulo de nó no topo da webpack.config.js Arquivo.

3. Adicione os carregadores

Para adicione os carregadores, você precisa definir o módulo propriedade. Abaixo, adicionamos o carregador de babel que permite que você use com segurança os recursos do ECMAScript 6 em seus arquivos JS:

 const path = require ("caminho"); module.exports = entry: "./src/script.js", saída: filename: "bundle.js", caminho: path.resolve (__ dirname, 'dist'), módulo: rules: [test : /\.js$/, exclude: / (node_modules | bower_components) /, use: carregador: "babel-loader", opções: presets: ["env"]]; 

A configuração pode parecer difícil, mas é apenas copiada Documentação do carregador do Babel. A maioria dos carregadores vem com um arquivo leia-me ou algum tipo de documentação, então você pode (quase) sempre saber como configurá-los corretamente. E os documentos Webpack também têm uma página que explica como configurar module.rules.

Você pode adicionar quantos carregadores forem necessários, aqui está a lista completa. Note que você também precisa instale cada carregador com npm para fazê-los funcionar. Para o carregador do Babel, você precisa instalar os pacotes do Node necessários com o npm:

 npm install --save-dev babel-loader babel-core babel-preset-env webpack 

Se você der uma olhada no seu package.json arquivo, você verá que npm adicionou três pacotes relacionados ao Babel ao devDependencies propriedade, estes vão cuidar da compilação ES6.

4. Adicione os plugins

Para adicione os plugins, você precisa especificar o plugins propriedade. Além disso, você também precisa exigir os plugins um por um, como são módulos externos.

No nosso exemplo, adicionamos dois plug-ins do Webpack: o Plugin de Webpack em HTML e a Plugin de pré-carregamento do Webpack. Webpack tem um bom ecossistema de plugins, você pode navegar pela lista completa aqui.

Para exigir os plugins como módulos de nó, crie duas novas constantes: HtmlWebpackPlugin e PreloadWebpackPlugin e use o require () função.

 const path = require ("caminho"); const HtmlWebpackPlugin = require ("html-webpack-plugin"); const PreloadWebpackPlugin = require ("pré-carregamento-webpack-plugin"); module.exports = entry: "./src/script.js", saída: filename: "bundle.js", caminho: path.resolve (__ dirname, 'dist'), módulo: rules: [test : /\.js$/, exclude: / (node_modules | bower_components) /, use: carregador: "babel-loader", opções: presets: ["env"]], plugins: [novo HtmlWebpackPlugin (), novo PreloadWebpackPlugin ()]; 

Assim como no caso de carregadores, você também precisa instalar os plugins do Webpack com npm. Para instalar os dois plug-ins no exemplo, execute os dois comandos a seguir em sua linha de comandos:

 npm install html-webpack-plugin --save-dev npm install --save-dev pré-carregamento-webpack-plugin 

Se você verificar seu package.json arquivo agora, você verá que npm adicionou os dois plugins ao devDependencies propriedade.

Execute o Webpack

Para criar a árvore de dependência e produzir o pacote, execute o seguinte comando na linha de comando:

 webpack 

Geralmente leva um ou dois minutos para o Webpack construir o projeto. Quando terminar, você verá uma mensagem semelhante em sua CLI:

Se tudo desse certo Webpack Criou um dist pasta na raiz do seu projeto e colocou os dois arquivos agrupados (bundle.js e index.htmldentro dela.

Repo Github

Se você quiser dar uma olhada, fazer o download ou comprar o projeto inteiro, dê uma olhada no nosso repositório do Github.