Conceitos centrais do framework webpack (organização de conhecimentos)

O que é webpack?

webpack é uma ferramenta de construção de pacotes (não é uma biblioteca ou framework) para o frontend, que pode empacotar vários recursos, como JS (com JSX), coffee, css (com less/sass), imagens e outros são tratados e usados como módulos.

1.Conhecimentos básicos

　　1.1 webpack é um empacotador de módulos (module bundler) para aplicações JavaScript modernas. Quando o webpack processa uma aplicação, ele constrói recursivamente um gráfico de dependência, que contém todos os módulos necessários para a aplicação, e então empacota todos esses módulos em um ou mais bundles

　　1.2quatro conceitos centrais do webpack:

　　　　1.2.1 entry (entrada): entry point, ponto de entrada (pode haver múltiplos), o webpack parte do ponto de entrada para encontrar quais arquivos são dependentes do arquivo de entrada, constrói o gráfico de dependência interno e o processa para saída em arquivos chamados bundles

　　　　1.2.2 output (saída): especifica o caminho (path) e o nome (filename) dos arquivos bundles após o processamento do entry point　　　　

　　　　1.2.3 loader (carregador): usado para processar arquivos não JS, convertendo todos os arquivos em módulos que o webpack pode processar, e então entregando ao webpack para empacotamento e outros tratamentos; o loader do webpack, em essência, converte todos os tipos de arquivos em módulos que a dependência gráfica da aplicação pode referenciar diretamente, com dois objetivos:

　　　　　　1.2.3.1 Use a propriedade test para identificar os arquivos que podem ser convertidos pelo loader

　　　　　　1.2.3.2 Use a propriedade use para converter esses arquivos, adicionando-os ao gráfico de dependências e, eventualmente, adicionando-os ao bundle

　　　　　　Se você quiser definir loaders no configuração do webpack, você deve definir它们 em module.rules, não em rules

　　　　1.2.4 Plugins (plugins): desde a otimização e compressão do pacote até a redefinição das variáveis no ambiente. A interface do plugin é extremamente poderosa e pode lidar com uma variedade de tarefas

　　　　　　Para usar um plugin, basta require-lo e adicioná-lo ao array plugins. A maioria dos plugins pode ser personalizada através de opções (options). Você também pode usar o mesmo plugin várias vezes em um arquivo de configuração para diferentes propósitos, neste caso, você precisa criar uma instância dela usando o operador new.

　　　　　　O Webpack oferece muitos plugins prontos para uso! Consulte a lista de plugins para obter mais informações. Para obter mais detalhes, consulte o documento oficial. https://doc.webpack-china.org/concepts/.

Resumo

Os conceitos principais (organização de conhecimentos) do framework Webpack apresentados pelo editor são esperados ajudar a todos. Se você tiver alguma dúvida, por favor, deixe um comentário, o editor responderá a tempo. Agradecemos também pelo apoio ao tutorial de clamor!

Declaração: O conteúdo deste artigo é de propriedade da internet, pertence ao respectivo proprietário, o conteúdo é contribuído e carregado voluntariamente pelos usuários da internet, este site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidade legal. Se você encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie um e-mail para: notice#w. Agradecemos a todos pelo apoio ao tutorial de clamor!3Avisos: O conteúdo deste artigo foi extraído da internet, pertence ao respectivo proprietário, o conteúdo foi carregado pelos usuários da internet, este site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidade legal. Se você encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie um e-mail para: notice#w, fornecendo provas relevantes. Se confirmado, o conteúdo suspeito será imediatamente removido deste site.