Saiba mais sobre o webpack da ferramenta de empacotamento de módulos

1. O que é webpack

1. Explicação oficial

Em essência, webpack é uma ferramenta de empacotamento modular estático para aplicativos JavaScript atuais. (Esta frase pode ser resumida em dois pontos: módulos e embalagens )

Vamos falar sobre os conceitos de módulos e embalagens !

2. Modularização front-end

• Algumas soluções para modularização front-end: AMD, CMD, CommonJS, ES6 (os navegadores não podem reconhecê- los, mas o webpack pode ser seu suporte subjacente antes que o desenvolvimento modular possa ser realizado)
• Antes do ES6 , se você quiser modularizar O desenvolvimento requer a ajuda de outras ferramentas para que possamos realizar o desenvolvimento modular.
• Depois de concluir o projeto através do desenvolvimento modular, também precisamos lidar com várias dependências entre módulos e integrá-los e empacotá -los
• . cores é que nos permite conduzir o desenvolvimento modular e nos ajuda a lidar com dependências entre módulos.
• Não apenas arquivos JavaScript , nossos arquivos CSS , imagens , json , etc. podem ser usados ​​como módulos no webpack.

3. Como entender a embalagem?

• O Webpack pode nos ajudar a modularizar e lidar com vários relacionamentos complexos entre módulos . O conceito de embalagem é fácil de entender.
• É para empacotar e mesclar vários módulos de recursos no webpack em vários pacotes (Bundle).
• Durante o processo de empacotamento, os recursos também podem ser processados , como compactação de imagens, conversão de scss em css e conversão de sintaxe ES6 em ES5. para JavaScript e outras operações.
• As ferramentas de empacotamento incluem grunt/gulp

Comparação entre webpack e grunt/gulp

• O núcleo do grunt/gulp é Task.
  1. Você pode configurar uma série de tarefas e definir as transações a serem processadas pelas tarefas (como ES6, conversão ts, compactação de imagem, conversão scss para css)
  2. Em seguida, deixe o grunt/gulp executar essas tarefas em sequência e automatize todo o processo

• para ver uma tarefa do gulp.
  1. A tarefa a seguir é converter todos os arquivos js em src para a sintaxe ES5.
  2. E finalmente envie para a pasta dist.
  

• Quando usar grunhido/gole?
  1. As dependências dos módulos do projeto são muito simples e o conceito de modularização nem mesmo é utilizado.
  2. Basta usar grunt/gulp para mesclagem e compactação simples.
  3. Se todo o projeto utiliza gerenciamento modular e a interdependência é muito forte, podemos usar o webpack.

• Qual é a diferença entre grunhido/gulp e webpack?
  Primeiro, grunt/gulp coloca mais ênfase na automação de processos front-end, e a modularização não é seu núcleo.
  2. O Webpack dá mais ênfase ao gerenciamento de desenvolvimento modular , e funções como compactação de arquivos, mesclagem e pré-processamento são funções incluídas.

2. A instalação do webpack

( wepack deve depender do ambiente do nó para operação normal, e o ambiente do nó deve ser. necessário para a execução normal. Use a ferramenta npm para gerenciar vários pacotes dependentes no nó).

• Portanto, para instalar o webpack, você deve primeiro instalar o Node.js. vem com a ferramenta de gerenciamento de pacotes npm
• para instalar o webpack globalmente (npm install webpack@. 3.6.0 -g) e
• para instalar o webpck localmente (npm install [email protected] --save-dev) –save-dev é uma dependência de desenvolvimento e não precisa ser usado após o projeto ser empacotado.

3. Configuração do Webpack

1. Análise de arquivos e pastas

• Pasta dist: usada para armazenar arquivos compactados posteriormente
• Pasta src: usada para armazenar os arquivos de origem que escrevemos
  main.js : o arquivo de entrada do projeto.
  mathUtils.js : define algumas funções de ferramentas matemáticas que podem ser referenciadas e usadas em outro lugar.
  index.html : O navegador abre o html da página inicial exibida (referenciado aqui é o conteúdo do arquivo empacotado final em src, ou seja, a pasta dist ).
  package.json : gerado através do npm init, um arquivo gerenciado pelo pacote npm.

A seguir está o código no arquivo mathUtils.js e no arquivo main.js : (especificação de modularização CommonJS, CommonJS é o padrão de modularização, nodejs é a implementação de CommodJS (modularização))

2. Comando

webpack ./src/main.js ./dist/bundle.js (empacotar o arquivo main.js em um arquivo bundle.js)

Descrição: Da mesma forma, você também pode usar a especificação modular ES6

3. Crie um arquivo webpack.config.js para simplificar o comando de empacotamento

(mapeie o comando de empacotamento para

o código de entrada e saída do pacote neste arquivo:

entrada: Para a

saída de entrada do pacote: Precisamos obter o caminho na

• saída de saída do pacote dinamicamente,
• para que possamos usar a sintaxe do Node.js para importar um módulo. Este módulo é o arquivo entre aspas do caminho (const path = require. ('caminho') Precisa ser encontrado no pacote do nó)
• Use node.js através do comando npm init (inicialização)
• para gerar o arquivo package.json (este arquivo descreve as informações do projeto atual) licença: "ISC" (código aberto para o projeto), a seguir está

a descrição do código package.json: Se você quiser usar o nó, você deve confiar no arquivo package.json

Depois de executar npm install [email protected] --save-dev , as dependências são adicionadas da seguinte forma

4. Mapeando comandos do webpack para npm run

Além de mapear o webpack para entrada e saída , você também pode mapear comandos do webpack para npm run para algumas operações (precisa ser modificado na tag de script **"script"** em package. JSON). .

4. O uso do loader

1. O que é loader?

• Loader é um conceito central no webpack.

Agora vamos pensar sobre para que o webpack é usado.

• Usamos principalmente o webpack para processar o código js, ​​e o webpack irá lidar automaticamente com as dependências relacionadas ao js
• . No entanto, durante o desenvolvimento, ele não é apenas processado pelo código js básico, mas também precisa carregar css, imagens e algum código avançado para. converta ES6 em ES5, converta TypeScript em código ES5, converta scss e less em css, converta arquivos .jsx, .vue em arquivos js, etc.
• Para os recursos do próprio webpack, essas transformações não são suportadas
• no momento, basta estender o carregador correspondente para o webpack

2. Processo de uso do carregador

1)

Trabalho de preparação para processamento de arquivo css:

1. No diretório src, crie um arquivo css. , crie um arquivo normal.css nele

2. Reorganize a estrutura de diretórios do arquivo e coloque os arquivos js dispersos em uma pasta js

3. O código em normal.css é muito simples, ou seja, defina o corpo para vermelho

4. Mas o estilo normal.css não terá efeito neste momento, porque não é referenciado e o webpack não consegue encontrá-lo, porque temos apenas uma entrada, e o webpack irá procurar outros arquivos dependentes a partir da entrada.

5. Neste momento devemos referenciá-lo em main.js, o arquivo de entrada

Depois disso precisamos importar o carregador correspondente para uso!

• Etapa 1 : Instale o carregador que você precisa usar por meio do npm
  (npm install --save-dev css-loader) (npm install --save-dev style-loader)
  No site oficial do webpack, encontre o seguinte método de uso do carregador para estilos:
  
  

• Etapa 2 : Faça instruções de configuração sob a palavra-chave module em webpack.config.js

: css-loader é responsável apenas por carregar arquivos css e não é responsável por incorporar estilos css específicos em documentos.

Neste momento, também precisamos de um estilo. loader nos ajuda a processar

Nota: o style-loader precisa ser colocado na frente do css-loader.

2) Processamento de menos arquivos,

• etapa 1 : Instale o carregador correspondente (nota: less também é instalado aqui, porque o webpack usará less para compilar o arquivo less). Comando: npm install --save-dev less-loader less

• Etapa 2 : Modifique o arquivo de configuração correspondente (em webpack.config.js) e adicione uma opção de regras para processar arquivos .less. do seguinte modo:

3) Processamento do arquivo de imagem,

• etapa 1 : adicione duas imagens ao projeto (uma com menos de 8kb e a outra com mais de 8kb)

• etapa 2 : primeiro considere referenciar a imagem no estilo css, como segue

  

• Etapa 3 : Modifique o arquivo de configuração correspondente (em webpack.config.js) e adicione uma opção de regras para processamento de arquivos de imagem. do seguinte modo:

  

• Passo 4 : Foi encontrado um erro após o empacotamento, pois imagens maiores que 8kb serão processadas através do file-loader , mas não há file-loader em nosso projeto. (Você precisa instalar o file-loader , comando npm install --save-dev file-loader). Após a instalação e empacotamento, você descobrirá que há um arquivo de imagem adicional na pasta dist.

  

Descrição:

• Descobrimos que o webpack gerou automaticamente um nome muito longo para nós

  1. Este é um valor hash de 32 bits para evitar duplicação de nomes.
  2. No entanto, no desenvolvimento real, pode haver certos requisitos para o nome da imagem empacotada

• . Portanto, podemos adicionar as seguintes opções nas opções:

  1. img: a pasta na qual o arquivo será empacotado.
  2. nome: Obtenha o nome original da imagem e coloque-o neste local
  3. Hash8: Para evitar conflitos de nomes de imagens, o hash ainda é usado, mas apenas 8 bits são retidos.
  4. ext: Use a extensão original da imagem da seguinte forma:
  

• Você também precisará configurar e modificar o caminho usado pela imagem posteriormente

  1. Por padrão, o webpack retornará o caminho gerado ao usuário.
  2. No entanto, todo o programa está empacotado na pasta dist, então aqui você precisa adicionar outro dist/ ao caminho.
  do seguinte modo:
  

Em resumo, após o empacotamento, o arquivo de imagem fica assim

4), ES6 a ES5 babel

5. Configure o Vue no webpack

• Etapa 1: Comando de execução do terminal (npm install --save vue)

• Etapa 2: Importe o Vue em main.js (importe o Vue de 'vue') como segue

• Etapa 3: pendure p na instância vue em index.html, como segue

• Etapa 4: Um erro é encontrado após o empacotamento. Precisamos especificar que o vue que usamos é a versão do compilador de tempo de execução .

Operações específicas: você precisa adicionar resolução ao webpack e usar um alias ( alias ), como segue:

6. Uso do Vue no webpack

Etapa 1: Pendure p na instância do vue em index.html

Etapa 2: Importe o componente APP para o arquivo main.js , registre o APP na instância Vue e use o componente APP no modelo Vue ( componentização )

Etapa 3: Crie o arquivo APP.vue e separe o modelo da página vue do código js e do código css , como segue

Etapa 4: configure o carregador correspondente do vue,

Modifique o arquivo de configuração de webpack.config.js:

7. Uso de plugin

1. Entenda plugin

• O que é plugin?
  1. Plugin significa plug-in, que geralmente é usado para estender uma arquitetura existente.
  
2. Plug-ins no webpack são várias extensões para as funções existentes do
• webpack
• , como otimização de empacotamento, compactação de arquivos, etc.
• 
  1. O carregador é usado principalmente para converter certos tipos de módulos. É um conversor.
  2. Plugin é um plug-in, que é uma extensão do próprio webpack e
• o processo de uso de um plugin extensor.
  1. Passo 1: A instalação através do npm requer o uso de plugins (alguns plug-ins já integrados ao webpack não precisam ser instalados)
  2. Etapa 2: Configurar os plug-ins do plug-in em webpack.config.js

2. Webpack-Add copyright information Uso do plug-in

3. Plug-in HTML do pacote

4. Plug-in de compressão js

8. Construir um servidor local

• . O Webpack fornece um servidor de desenvolvimento local opcional. Este servidor local é construído com base em node.js e usa a estrutura expressa internamente. Ele pode alcançar o que desejamos, permitindo que o navegador atualize e exiba automaticamente os resultados modificados. .

• No entanto, é um módulo separado. Você precisa instalá-lo antes de usá-lo no webpck. Comando: (npm install --save-dev [email protected])

• devserver também é uma opção no webpack . pode ser definido da seguinte forma :
  1. contentBase: Qual pasta fornece serviços locais. O padrão é a pasta raiz. Precisamos preencher ./dist aqui.
  2. porta: número da porta
  3. inline: atualização da página em tempo real
  4. historyApiFallback: Na página SPA, a

• configuração do arquivo webpack.config.js do modo histórico que depende de HTML5 é modificada da seguinte forma:
  

• O parâmetro –open significa abrir o navegador diretamente

Além disso,

a seguir queremos separar os arquivos de configuração do webpack: ou seja, separar o que é necessário para o desenvolvimento e o que é usado para publicação ( compilação ). do seguinte modo:

9. Vue CLI

1. O que significa CLI?

• É uma interface de linha de comando, traduzida como interface de linha de comando, mas comumente conhecida como andaime
• Vue CLI é um andaime de projeto vue.js lançado oficialmente.
• Usando vue-cli, você pode construir rapidamente um ambiente de desenvolvimento Vue e a configuração do webpack

2

. Pré-requisitos para usar o Vue CLI - Node (o Node precisa ser instalado)

npm

deve estar envolvido.

• O nome completo do NPM é Node Package Manager
• , que é uma ferramenta de gerenciamento e distribuição de pacotes NodeJS. Ele se tornou um padrão não oficial para publicação de módulos (pacotes) do Node
• e é frequentemente usado para instalar alguns pacotes dependentes durante o processo de desenvolvimento.

3. Use Vue CLI para

• instalar o andaime Vue

npm install -g @vue/cli

Nota: A versão instalada acima é a versão Vue CLI3 Se você deseja inicializar o projeto de acordo com o método Vue CLI2, não é possível

• inicializar. o projeto Vue CLI2

vue init webpack meu -projeto