Skip to main content

Webpack

O que significa Webpack?>>>>>>>>>>>>>>>>>>>>>>>>>>

Webpack é um chamado “codebundler”, que é usado principalmente para fundir diferentes arquivos JavaScript para uso no navegador.

Divisão de código e JavaScript

O ambiente NodeJS runtime, no contexto do qual o JavaScript pode ser usado no lado do servidor, tem suportado a divisão do código JavaScript em módulos usando CommonJS desde o início. O CommonJS permite que o código seja dividido em módulos dependentes e carregado independentemente um do outro, conforme necessário. A divisão em módulos independentes e a divisão de códigos é feita principalmente para uma melhor clareza e uma gestão mais fácil do código do programa. Esta é uma prática comum de engenharia que tem sido usada por décadas em várias linguagens de programação como Java, C++ ou Python. Não importa em qual navegador web o JavaScript é usado, a linguagem de scripting não oferece suporte para divisão de código.

Módulos para o navegador web

É aqui que entra em jogo o Webpack. O codebundler fornece suporte para divisão de código no navegador web carregando módulos independentes sob demanda como se eles fossem destinados para uso em um ambiente NodeJS. O código modularizado é primeiro analisado e processado pelo codebundler, depois é criado um pacote a partir dele, que pode ser carregado dinamicamente a qualquer momento, se necessário. Além disso, o bundler permite-nos utilizar pacotes npm como módulos, tais como jQuery ou React. Estes então não têm de ser incorporados como scripts individuais no documento HTML, o que tem inúmeras vantagens, tais como

  • nenhuma variável global
  • sem delimitação do âmbito
  • o código torna-se muito mais controlável e previsível

Configuração do Webpack

A configuração é implementada na forma de um módulo NodeJS que exporta um chamado “Config Object”. Ele pode conter qualquer código JavaScript, o que abre uma variedade de diferentes possibilidades para os desenvolvedores. Por exemplo, um arquivo de entrada para o codebundler pode ser carregado dinamicamente a partir do sistema de arquivo, conforme necessário. O objeto de configuração inclui quatro palavras-chave importantes:

Entrada

Estas são as configurações de entrada. Eles permitem que os desenvolvedores dêem ao agregador de código instruções precisas sobre onde começar a fazer pacotes. Exemplo de uma Configuração de Entrada:

/module.exports={
/context:path.resolve(__dirname),
/entry:’./index.js’,
/entrada: [‘./index.js’, ‘./login.js’],
/entrada: {
/index: ‘./index.js’,
/login: ‘./login.js’,
/},
/}

Saída

Este é um objeto com chaves, que é usado para controlar a saída do Webpack. Exemplo de configuração de saída:

/module.exports={
/context:path.resolve(__dirname),
/entry:’./index.js’,
/entrada: [‘./index.js’, ‘./login.js’],
/entrada: {
/index: ‘./index.js’,
/login: ‘./login.js’,
/},
/output:{
/caminho:caminho.join(__nome_do_caminho, ‘construir’),
/publicPath: ‘/’,
/ nome do ficheiro: ‘bundle.js
/nome do ficheiro: ‘[nome].js’,
/filename: ‘[chunkhash].js’,
/}
/}

Carregador

São transformações que podem ser usadas para adaptar a configuração de módulos individuais mesmo antes de serem montados em um pacote. Exemplo para o uso de um carregador:

/module.exports={
/módulos:{
/regras:[
/{
/test:/.js$/
/utilização:[
/{
/loader: ‘babel-loader’,
/opções:{
/presets:[‘reagir’]
/}
/}
/]
/},
/{
/test:/.sass$/,
/utilização:[
/{
/loader: ‘style-loader’,
/},
/{
/loader: ‘css-loader’,
/},
/{
/loader: ‘sass-loader’,
/}
/]
/}
/]
/}
/}

Plug-ins

Os plug-ins são transformações que são aplicadas por pacote. Por exemplo, eles são usados para funções que não são suportadas pelo Carregador. Exemplo de uma Configuração do Plug-In:

/module.exports={
/plugins:[
/newExtractTextPlugin({
/nome: ‘bundle.css
/}),
/newwebpack.optimize.UglifyJsPlugin({
/minimize:true
/}),
/]
/}

Conclusão da Equipa OM Optimiser

Webpack é um pacote de código que permite a modularização do código do programa no nível do frontend, o que contribui para uma melhor visão geral e uma gestão mais fácil do código do programa.

Você tem mais alguma pergunta?

Por favor, contacte-nos