Alai

webpack é um bundler de módulos. Seu objetivo principal é empacotar arquivos JavaScript para uso em um navegador, mas também é capaz de transformar, empacotar ou empacotar praticamente qualquer recurso ou ativo.

Índice

1. Instalar
2. Introdução
3. Conceitos
4. Contribuir
5. Suporte
6. Equipe Principal
7. Patrocínio
8. Premium Parceiros
9. Outros Patrocinadores e Patrocinadores
10. Patrocinadores de Ouro
11. Patrocinadores de Prata
12. Patrocinadores de Bronze
13. Backers
14. Abrigado especial

Instalar

Instalar com npm:

npm install --save-dev webpack

Instalar com fio:

yarn add webpack --dev

Introdução

webpack é um bundler para módulos. O objetivo principal é empacotar arquivos JavaScript para uso em um navegador, mas também é capaz de transformar, empacotar ou empacotar praticamente qualquer recurso ou ativo.

TL;DR

• Bundles ES Modules, CommonJS, e módulos AMD (mesmo combinados).
• Pode criar um único pacote ou múltiplos pedaços que são carregados assincronamente em tempo de execução (para reduzir o tempo de carregamento inicial).
• Dependências são resolvidas durante a compilação, reduzindo o tamanho do tempo de execução.
• Os carregadores podem pré-processar arquivos durante a compilação, por exemplo, TypeScript para JavaScript, Strings de Handlebars para funções compiladas, imagens para Base64, etc.
• Sistema de plugins altamente modular para fazer o que mais a sua aplicação necessitar.

>

Começar

Verifica o guia rápido do webpack Começar e os outros guias.

Compatibilidade do navegador

webpack suporta todos os navegadores que são compatíveis com ES5 (IE8 e abaixo não são suportados).webpack também precisa de Promise para import() e require.ensure(). Se quiser suportar browsers mais antigos, terá de carregar um polyfill antes de usar estas expressões.

Conceitos

Plugins

webpack tem uma rica interface de plugin. A maioria das funcionalidades no próprio webpack utilizam esta interface de plugin. Isto faz com que o webpack seja muito flexível.

Nome	Status	Install Size	Descrição
mini-css-extract-plugin			Extrai CSS em arquivos separados. Ele cria um arquivo CSS por arquivo JS que contém o CSS.
compressão-webpack-plugin			Prepara versões comprimidas de ativos para servi-los com Content-Encoding
html-webpack-plugin			Simplifica a criação de ficheiros HTML (index.html) para servir os seus pacotes

Loaders

webpack permite o uso de loaders para pré-processar ficheiros. Isto permite a agregação de recursos estáticos muito além do JavaScript. Você pode facilmente escrever seus próprios carregadores usando Node.js.

Loaders são ativados usando prefixos de loadername! em instruções de require(), ou são automaticamente aplicados via regex a partir da configuração do seu webpack.

Arquivos

>

>

>

Nome	Status	Instalar Tamanho	Descrição
Traçar-carregador			Carrega o conteúdo bruto de um arquivo (utf-8)
val-loader			Executar código como módulo e considerar exportações como código JS
url-carregador			Trabalha como o carregador de arquivos, mas pode retornar uma Url de Dados se o arquivo for menor que um limite
file-loader			Emita o arquivo na pasta de saída e retorna a url (relativa)

JSON

Nome	Status	Instalar Tamanho	Descrição
			Carrega e transporta um ficheiro CSON

Transporte

Nome	Status	Instalar Tamanho	Descrição
			Carrega o código ES2015+ e transporta para ES5 usando Babel
			Carrega o código ES2015+ e transporta para ES5 usando Traceur
			Carrega o TypeScript como JavaScript
			Loads CoffeeScript like JavaScript

Templating

Nome	Status	Instalar Tamanho	Descrição
			Exporta HTML como string, requer referências a recursos estáticos
			Carrega modelos Pug e retorna uma função
			Marcação de pilha para HTML
			Carrega e transforma um arquivo HTML usando PostHTML
			Piles Handlebars to HTML

Styling

Nome	Status	Install Size	Descrição
<style>			Adicionar exportações de um módulo como estilo para DOM
			Carrega o ficheiro CSS com as importações resolvidas e devolve o código CSS
			Carrega e compila um arquivo MENOS
			Carrega e compila um arquivo Sass/SCSS
>			Carrega e compila um ficheiro Stylus
>			Carrega e transforma um arquivo CSS/SSS usando PostCSS

Estruturas

Nome	Status	Instalar Tamanho	Descrição
			Cargas e compilações Componentes de Vue
			Processo HTML & CSS com pré-processador de escolha e require() Componentes Web como módulos de primeira classe
			Carregamentos e compilações Angulares 2 Componentes
			Carregador de webpack oficialiot

Desempenho

webpack usa E/S assíncrona e tem múltiplos níveis de cache. Isto torna o webpack rápido e incrivelmente rápido em compilações incrementais.

Formatos de módulos

webpack suporta os módulos ES2015+, CommonJS e AMD fora da caixa. Ele realiza uma análise estática inteligente no AST do seu código. Tem até um motor de avaliação para avaliar expressões simples. Isto permite-lhe suportar a maioria das bibliotecas existentes fora da caixa.

Divisão de código

webpack permite-lhe dividir a sua base de código em vários pedaços. Os bocados são carregados de forma assíncrona em tempo de execução. Isto reduz o tempo de carregamento inicial.

Optimizações

webpack pode fazer muitas optimizações para reduzir o tamanho de saída do seuJavaScript, deduzindo módulos frequentemente utilizados, minificando, e dando-lhe o controlo total do que é carregado inicialmente e do que é carregado na divisão do código em tempo de execução. Ele também pode tornar seus pedaços de código amigável ao usar hashes.

Contribuindo

Queremos contribuir para que o webpack seja divertido, agradável e educacional para qualquer um, e para todos. Nós temos um ecossistema vibrante que se estende para além deste único repo. Convidamos você a conferir qualquer um dos repositórios em nossa organização ou organização webpack-contrib que abriga todos os nossos carregadores e plugins.

Contribuições vão muito além de pedidos e compromissos. Embora adoremos dar-lhe a oportunidade de colocar seu selo no webpack, também estamos entusiasmados em receber uma variedade de outras contribuições, incluindo:

• Atualizações de documentação, melhorias, designs, ou correções de bugs
• Escalonhas ou correções gramaticais
• README.md correções ou redesigns
• Unidade de adição, ou testes funcionais
• Triaging GitHub issues — especialmente determinar se um problema ainda persiste ou é reprodutível.
• Procurar #webpack no twitter e ajudar alguém que precisa de ajuda
• Ensinar outros a contribuir para um dos muitos repositórios do webpack!
• Blogando, falando sobre, ou criando tutoriais sobre um dos muitos recursos do webpack.
• Ajudando outros no nosso canal webpack gitter.

Para começar, dê uma olhada na nossa documentação sobre como contribuir.

Se você está preocupado ou não sabe por onde começar, você sempre pode chegar até Sean Larkin (@TheLarkInn) no Twitter ou simplesmente enviar um problema e um mantenedor pode ajudá-lo a dar orientações!

Abriamos também uma série em nossa Publicação Média chamada The Contributor’s Guide to webpack. Nós o convidamos a lê-lo e postar quaisquer perguntas ou respostas se você ainda precisar de ajuda.

Veja falar sobre webpack? Adoraríamos rever o seu resumo da sua palestra/CFP! Pode enviá-lo para webpack opencollective com e nós podemos dar indicações ou dicas!!!

Criar os seus próprios plugins e carregadores

Se criar um carregador ou plugin, nós iremos <3 para que possa abrir o código fonte, e colocá-lo em npm. Nós seguimos a convenção de nomes x-loader, x-webpack-plugin.

Suporte

Consideramos o webpack como uma ferramenta de baixo nível usada não apenas individualmente, mas também em camadas abaixo de outras ferramentas incríveis. Devido à sua flexibilidade, o webpack nem sempre é a solução de nível de entrada mais fácil, no entanto acreditamos que é a mais poderosa. Dito isto, estamos sempre à procura de formas de melhorar e simplificar a ferramenta sem comprometer a funcionalidade. Se você tem alguma idéia de como realizar isso, somos todos ouvidos!

Se você está apenas começando, dê uma olhada na nossa nova página de documentos e conceitos. Esta tem uma visão geral de alto nível que é ótima para iniciantes!!

Looking for webpack 1 docs? Por favor verifique o wiki antigo, mas note que esta versão obsoleta não é mais suportada.

Se você quiser discutir algo ou apenas precisar de ajuda, aqui está a nossa sala Gitter onde há sempre indivíduos procurando ajuda!

Se você ainda estiver tendo dificuldades, nós adoraríamos que você colocasse uma pergunta ao StackOverflow com a tag webpack. É muito mais fácil responder perguntas que incluem o seu webpack.config.js e arquivos relevantes! Então se você pode fornecê-los, ficaríamos extremamente gratos (e mais provavelmente ajudá-lo a encontrar a resposta!)

Se você tem conhecimento de twitter você pode tweetar #webpack com sua pergunta e alguém deve ser capaz de alcançar e ajudar também.

Se você descobriu um 🐜 ou tem uma sugestão de recurso, sinta-se livre para criar um problema no Github.

Licença

Core Team

Tobias Koppers Core Fundador de webpack

Johannes Ewald Loaders &Plugins Early adopter of webpack

Sean T. Larkin Relações Públicas Fundador da equipa principal

Kees Kluskens Desenvolvimento Patrocinador

Patrocínio

Maior parte dos membros da equipa principal, Os colaboradores do webpack e os colaboradores do ecossistema fazem este trabalho de código aberto no seu tempo livre. Se você usa o webpack para uma tarefa séria, e gostaria que investíssemos mais tempo nele, por favor, faça uma doação. Este projeto também aumenta a sua renda/produtividade. Ele torna o desenvolvimento e os aplicativos mais rápidos e reduz a largura de banda necessária.

É assim que usamos as doações:

• Permitir que a equipa central trabalhe no webpack
• Pontos de agradecimento se investiram muito tempo a contribuir
• Projectos de apoio no ecossistema que são de grande valor para os utilizadores
• Projectos de apoio que são os mais votados (trabalhos em andamento)
• Custo da infra-estrutura
• Taxas de manuseio de dinheiro

Parcerias Premium

Outros financiadores e patrocinadores

Antes de começarmos a usar o OpenCollective, As doações foram feitas anonimamente. Agora que fizemos a troca, gostaríamos de reconhecer esses patrocinadores (e aqueles que continuam a doar usando o OpenCollective). Se nos faltou alguém, por favor, envie-nos um PR, e nós o adicionaremos a esta lista.

Patrocinadores Ouro

Patrocinadores Ouro e receba seu logotipo em nosso LEIAME no Github com um link para o seu site.

Patrocinadores Prata

Patrocinador Prata e obtenha seu logotipo em nosso README no Github com um link para o seu site.

Patrocinadores Bronze

Patrocinador Bronze e obtenha seu logotipo em nosso LEIAME no Github com um link para o seu site.

Backers

Become um backer e obtenha sua imagem em nosso README no Github com um link para o seu site.

Agradecimento especial a

(Em ordem cronológica)

• @google for Google Web Toolkit (GWT), que visa compilar Java para JavaScript. Ele apresenta um Code Splitting similar ao webpack.
• @medikoo para modules-webmake, que é um projeto similar. webpack nasceu porque eu queria Code Splitting para modules-webmake. Curiosamente a questão do Code Splitting ainda está aberta (graças também a @Phoscur pela discussão).
• @substack for browserify, que é um projeto similar e fonte para muitas idéias.
• @jrburke for require.js, que é um projeto e fonte similar para muitas idéias.
• @defunctzombie para a especificação do campo browser, que torna os módulos disponíveis para node.js, browserify e webpack.
• Todos os primeiros usuários do webpack, que contribuíram para o webpack escrevendo problemas ou PRs. Você influenciou a direção…
• @shama, @jhnns e @sokra para a manutenção deste projeto
• Todos os que escreveram um carregador para webpack. Você é o ecossistema…
• Todos os que eu esqueci de mencionar aqui, mas também influenciou o webpack.