Configuração de entrada do conceito principal do Webpack (entrada)

Se as dependências de cada módulo do projeto forem consideradas como uma árvore, então a entrada será a raiz da árvore de dependências.

Esses módulos dependentes serão encapsulados em um pedaço durante o empacotamento. Então, o que é pedaço?

Chunk significa literalmente bloco de código, que no Webpack pode ser entendido como alguns módulos que foram abstraídos e empacotados. É como um saco de arquivos contendo muitos arquivos. Os arquivos dentro de cada módulo do Webpack adicionam uma camada de embalagem na parte externa para formar um pedaço:

Dependendo da configuração específica, um ou mais pedaços podem ser gerados quando um projeto é empacotado.

Várias entradas podem ser definidas no projeto e cada entrada gerará um recurso de resultado.

Por exemplo, existem duas entradas em nosso projeto, src/index.js e src/lib.js dist/index.js e dist/lib.js

Em alguns casos especiais, uma entrada pode gerar vários pedaços e, em última análise, várias

entradas de pacote configurável.

Parâmetros: Entrada entrada

• é a entrada para o módulo de configuração , que pode ser abstraída em entrada. A primeira etapa da execução da construção do Webpack será pesquisar e analisar recursivamente todos os módulos dependentes de entrada
• . preenchido, o Webpack reportará um erro e sairá

module.exports = {
	entrada:'./src/index.js', //Indica o arquivo de entrada, ou seja, inserindo nosso projeto a partir de index.js}

tipo de entrada

se for um tipo de array, quando usado com a saída. item de configuração da biblioteca, apenas o último do array O módulo do arquivo de entrada será exportado

② Nome do Chunk

O Webpack dará um nome para cada Chunk gerado O nome do Chunk está relacionado à configuração da Entrada:

• se a entrada. é uma string ou array, apenas um Chunk será gerado. Neste momento, o nome do Chunk é principal;
• se a entrada for um objeto, vários Chunks podem aparecer. chave no par chave-valor do objeto

③Dinâmica de configuração de entrada

Se houver várias páginas no projeto, você precisará configurar uma entrada para cada página, mas o número dessas páginas pode continuar a crescer, então a configuração de Entrada. será afetado por outros fatores e não pode ser escrito como um valor estático. A solução é definir Entry em uma função para retornar dinamicamente a configuração mencionada acima. O código é o seguinte:

// Entrada de função síncrona: () => {.
  retornar {
    a:'./páginas/a',
    b:'./páginas/b',
  }
};
// Entrada de função assíncrona: () => {
  retornar nova Promessa((resolver)=>{
    resolver({
       a:'./páginas/a',
       b:'./páginas/b',
    });
  });
};

Parâmetro: context

O Webpack usará o contexto como o diretório raiz ao procurar por arquivos com caminhos relativos . O contexto é padronizado para o diretório de trabalho atual onde o Webpack é iniciado. Se quiser alterar a configuração padrão do contexto, você pode defini-lo assim no arquivo de configuração:

module.exports = {
	contexto: path.resolve(__dirname, 'app')
}

Observe que o contexto deve ser uma string de caminho absoluto.

configuração do arquivo de entrada única

trazendo o parâmetro webpack --context ao iniciar o Webpack.

Uso: entry:string|Array<string>

1. Sintaxe abreviada

webpack.config.js

//Por ser único, pode ser abreviado como:
módulo.exportações = {
  entrada: './main.js'
};

A configuração de entrada acima é escrita como a seguinte abreviatura

module.exports = {
  entrada: {
    principal: './main.js'
  }
};

2. Sintaxe da matriz

module.exports = {
  entrada: {
    principal:['./main.js','./main2.js']
  }
};

A função de passar um array é mesclar vários recursos antecipadamente. Ao empacotar, o Webpack usará o último elemento do array como o caminho de entrada real

. maneira de alterar o nome do bloco, só pode ser o padrão "principal".

Configuração de arquivo de múltiplas entradas

Uso: entry: {[entryChunkName: string]: string|Array}

Sintaxe do objeto

module.exports = {
  entrada: {
    aplicativo: './src/app.js',
    fornecedores: './src/vendors.js'
  }
};

Isso será mais complicado. No entanto, esta é a forma mais extensível de definir pontos de entrada numa aplicação.

"Configuração extensível do webpack" : reutilizável e pode ser combinada com outras configurações. Esta é uma técnica popular para separar as preocupações do ambiente, do destino de construção e do tempo de execução. Em seguida, mescle-os usando ferramentas especializadas como webpack-merge.

Cenários de aplicação

1. Aplicativos de página única

, sejam estruturas, bibliotecas ou módulos em cada página, são referenciados por um único ponto de entrada de app.js A vantagem disso é que apenas um arquivo JS será gerado e as dependências ficarão claras .

módulo.exportações = {
  entrada: './src/app.js'
};

Essa abordagem também tem desvantagens, ou seja, todos os módulos são empacotados juntos. Quando a escala do aplicativo aumenta para um determinado nível, o volume de recursos gerado será muito grande, o que reduzirá a velocidade de renderização da página do usuário

. configuração do Webpack, quando um pacote for maior que 250kB (antes da compactação), o pacote será considerado muito grande e ocorrerá um aviso durante o empacotamento, conforme mostrado na figura:

2. Separe a biblioteca de terceiros (fornecedor).

Para resolver o problema acima, você pode extrair a biblioteca de terceiros (fornecedor).

No Webpack, fornecedor geralmente se refere a terceiros, como bibliotecas . e estruturas usadas pelo projeto. Bundle

module.exports = {
  entrada: {
    aplicativo: './src/app.js',
    fornecedores: ['react','react-dom','react-router'],
  }
};

Com base no exemplo da aplicação, adicionamos uma nova entrada com o nome do chunk vendor e colocamos os módulos de terceiros dos quais o projeto depende na forma de um array.

Não definimos o caminho de entrada para o vendor. . O que o Webpack deve fazer?

Neste momento podemos usar CommonsChunkPlugin (CommonsChunkPlugin foi abandonado após o Webpack 4, você pode usar otimização.splitChunks) para extrair os módulos comuns nos dois pedaços de aplicativo e fornecedor.

Com esta configuração, o pacote gerado por app.js será apenas. contém O módulo de negócios e os módulos de terceiros dos quais ele depende serão extraídos para gerar um novo pacote, o que também atinge nosso objetivo de extrair o fornecedor.

Como o fornecedor contém apenas módulos de terceiros, esta parte não será alterada com frequência. Portanto, o cache do lado do cliente pode ser utilizado de forma eficaz, o que acelerará a velocidade geral de renderização quando o usuário solicitar a página posteriormente.

CommonsChunkPlugin é usado principalmente para extrair bibliotecas de terceiros e módulos públicos para evitar que arquivos agrupados carregados na primeira tela ou arquivos agrupados carregados sob demanda sejam muito grandes, resultando em longos tempos de carregamento.

3. Aplicativo de múltiplas páginas

Para cenários de aplicativos de múltiplas páginas, para reduzir ao máximo o tamanho dos recursos, esperamos que cada página carregue apenas sua própria lógica necessária, em vez de empacotar todas as páginas no mesmo pacote. Portanto, cada página precisa de um pacote independente . Nesse caso, usamos várias entradas para conseguir isso. Consulte o seguinte exemplo:

module.exports = {
  entrada: {
    pageOne: './src/pageOne/index.js',
    página Dois: './src/pageTwo/index.js',
    página Três: './src/pageThree/index.js'
  }
};

A configuração acima informa ao webpack que ele precisa de 3 gráficos de dependência independentes e separados. Neste momento, a entrada e a página estão em correspondência um para um, para que cada HTML possa carregar os módulos necessários, desde que seja introduzido. seu próprio JS.