webpack
Contraste o desenvolvimento e a engenharia tradicionais
Tome o desenvolvimento da mesma função como exemplo para comparar e mostrar dois métodos de desenvolvimento:
- A. Maneira tradicional, sem usar ferramentas de construção
- B. Método de engenharia, use webpack
Comparação esquemática
Caminho tradicional
Todos os recursos são citados diretamente no .html. É simples e claro para você escrever, mas também é conveniente para outras pessoas copiarem.
Engenharia
Ao desenvolver, escreva no código-fonte;
Ao publicar, use a ferramenta (webpack) para empacotar no código alvo (ele foi criptografado aqui), e então venha e introduza o
Comparação detalhada
| Caminho tradicional | Método de engenharia | |
|---|---|---|
| Podemos adotar a modularização js (introduzindo outro js em um js) | Não posso | posso |
| O código js pode ser criptografado | Não posso | posso |
| O código css pode ser compactado | Não posso | posso |
| Se deve suportar linguagem css pré-compilada | Não posso | posso |
resumo
Webpack é uma ferramenta. Depois de introduzi-la, você pode alterar o método de desenvolvimento (desenvolvimento tradicional -> desenvolvimento de engenharia) para melhorar a eficiência do desenvolvimento;
Exemplos de projetos tradicionais
Suponha que haja um projeto de desenvolvimento tradicional, como transformá-lo de uma forma de engenharia.
Conteúdo da estrutura
Crie três arquivos index.html, index.js, tool.js, a estrutura geral do projeto é:
|-yourproject/
|---index.html
|---index.js
|---tool.js
Copie os seguintes materiais:
index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<div id="app">
</div>
<!-- 引入两个js文件 -->
<script src="./tool.js"></script>
<script src="./index.js"></script>
</body>
</html>
tool.js
// 封装一个工具函数
// 把给指定id的元素设置内容
const updateDom = (id, content) =>{
document.getElementById(id).innerHTML = content
}
index.js
updateDom('app','index.html')
Descrição:
- Apresente vários arquivos js em um html e preste atenção em sua relação de pedido.
- O código do script está na parte inferior do corpo, o que garante que o nó dom seja renderizado antes que o código js seja executado.
Ícone
Como a função de tool.js é usada em index.js, index.js e tool.js também são referenciados em index.html, e a referência de tool.js é colocada antes da referência de index.js. O seguinte diagrama esquemático de todo o código:
resumo
O código acima tem os seguintes problemas:
- Existe uma relação de referência sequencial entre os arquivos js: como tool.js é referenciado em index.js, tool.js deve ser colocado antes de index.js.
- Existe poluição variável : as variáveis definidas em um arquivo podem ser modificadas ou sobrescritas em outro arquivo.
- Conforme o número de arquivos .js aumenta, o projeto se torna cada vez menos gerenciável.
- A tecnologia de modularização (introdução de outro js em um js) não pode ser usada para desenvolvimento.
- importar, exportar
Introdução básica ao webpack
No projeto tradicional anterior, levantamos alguns problemas e mencionamos a introdução de uma ferramenta especial: o webpack para resolver esse problema.
webpack é um *
静态模块打包器(module bundler)* de um aplicativo JavaScript moderno .
Sua ideia central é: tudo é um módulo e os módulos podem ser empacotados.
Relacionados ao negócio webpack , os produtos com competitividade relevante incluem:
Mas, no geral, no desenvolvimento de front-end, o webpack tem uma vantagem absoluta: as três estruturas de front-end de vue, react e angular contam com webpack para empacotamento. (Usar essas três estruturas para desenvolver projetos é inseparável do webpack)
Como apresentar e usar o webpack no projeto
Falamos sobre dois pontos acima: 1 Os projetos tradicionais têm deficiências; 2. O Webpack pode ser usado para resolver esses problemas.
A seguir, vamos aprender como usar o webpack no projeto.
Os passos básicos
- Use o npm para inicializar o projeto e instalar o webpack.
（要先有项目，然后再用webpack来优化开发） - Modifique a estrutura do diretório para aproveitar os benefícios da configuração zero
- Modifique um pouco o código, reescreva o código de forma modular
- Use webpack para empacotar o arquivo de origem (js) e gerar o arquivo de destino
- Apresente a meta após empacotar no arquivo html
Inicialize o projeto
Se for um projeto existente, diretamentenpm init
nó é um ambiente;
npm é uma ferramenta que vem junto com o node para baixar pacotes npm
webapck é uma ferramenta baseada no ambiente de nó. Deve ser executada no ambiente de nó. Se o nó não estiver instalado em seu computador, o webpack não será executado.
Se você ainda não criou um projeto, crie uma pasta vazia arbitrariamente, por exemplo, nomeie-a webpack-demo, entre na pasta e use o seguinte comando para gerar um package.json
npm init -y
Instale o webpack no projeto
Considerando que diferentes versões do webpack podem ser usadas em diferentes projetos, a instalação local (parcial) é usada aqui. Revise a diferença entre a instalação local e a instalação global.
npm i XXXX -g # 全局安装
npm i xxxx # 本地安装 不加-g
Instale o webpack
npm i [email protected] [email protected] -D
-------------------------------------------
+ [email protected]
+ [email protected]
added 392 packages from 220 contributors in 33.984s
dica: Se você não especificar a versão do pacote a ser instalado, ele definitivamente instalará a mais recente. Em 2020.10.10, o webpack atingiu 5. Como os outros plug-ins não acompanharam o tempo, é relativamente estável usar 4 agora.
- Ao instalar um pacote, se -D for adicionado, significa que o pacote é uma dependência de desenvolvimento, caso contrário, é uma dependência de produção por padrão.
Dependência de desenvolvimento: supondo que você esteja construindo uma casa agora, você precisa usar uma escavadeira. Esta escavadora é uma dependência de desenvolvimento (após a conclusão da casa já não é necessário atravessar o rio para demolir a ponte).
Dependência de produção: suponha que você construa uma casa agora, você precisa usar fios e canos de água. Este fio e cano de água dependem da produção (depois que a casa for concluída, ela será usada).
Se você vir a saída mostrada acima, significa que a instalação foi bem-sucedida. Ao mesmo tempo, você também pode observar em node_modules.
Verifique se a instalação foi bem sucedida
# 方式一：
node_modules\.bin\webpack -v
# 方式二：
npx webpack -v
Nota:
-
O nome do projeto não pode ser usado
wepback -
Por ser um webpack e não um global instalado , ele não pode ser usado diretamente
webpack -vpara fazer o teste. -
npx é um novo recurso fornecido após npm5.2. Ele
node_modules/.binverificará se o comando existe nele durante a execução .
Ajuste a estrutura do código
Este passo não é necessário, apenas para apreciar o fora da caixa (Webpack de zero configuração) benefícios.
Faça uma coisa: coloque os três códigos de arquivo em srcum diretório chamado
|-package.json
|-src
|--index.html
|--index.js
|--tool.js
Depois de ajustar a estrutura do diretório, existe um arquivo denominado index.js em src. Nas operações subsequentes, podemos aproveitar os benefícios da configuração zero.
Visto que o webpack suporta o diretório src por padrão, o nome do diretório só pode ser src.
Modificar o conteúdo do código
O conteúdo a seguir usará as palavras de exportação e importação, que são a sintaxe modular de es6 e são usadas em conjunto.
Claro, você também pode usar module.exports e require em nodejs para modelá-lo.
Para escrever o código de forma modular , duas mudanças específicas são feitas:
- Exporte o módulo em tool.js
- Use módulos em index.js
tool.js
Ele é usado para fornecer um método para exportar este método para outros módulos usarem, o código específico é o seguinte:
const updateDom = (id, content) =>{
document.getElementById(id).innerHTML = content
}
+ export {
+ updateDom
+ }
index.js
Apresente os métodos exportados em tool.js para index.js. Observe que isso já foi envolvido在一个js中引用另一个js
+ import { updateDom } from './tool'
updateDom('app','index.html')
dica: Agora isso requer o uso de uma abordagem modular no index.js, portanto não pode ser usado diretamente no navegador, se referenciado diretamente no index.html no
浏览器会报错.
Em seguida, precisamos usar comandos webpack para processar index.js.
embalagem webpack
webpack4.x apresenta o slogan do empacotamento de configuração zero: o código pode ser empacotado sem gravar nenhum arquivo de configuração. Claro, ele tem uma premissa: há um arquivo src / index.js no diretório raiz.
O comando de empacotamento é:
npx webpack
# 或者是
node_modules/.bin/webpack index.js
Se você não encontrar erros, verá resultados semelhantes a seguir:
Isso mostra que a operação de empacotamento foi bem-sucedida: index.js e tool.js já 合成tinham um arquivo main.js.
Dois arquivos .js são combinados em um .js: a vantagem é que ele reduz uma solicitação do navegador;
A modularização pode ser usada: A vantagem é que é mais conveniente escrever código.
O esquema é o seguinte:
Apresente js empacotado
Importe o main.js empacotado acima para index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<div id="app">
</div>
<!-- 引入打包后的.js文件 -->
<script src="../dist/main.js"></script>
</body>
</html>
Ok, agora você pode ver que este código pode funcionar normalmente.
A seguir está um diagrama de exemplo.
resumo
- webpack pode nos ajudar a melhorar o método de desenvolvimento de front-end;
- É baseado em nodejs. Antes de usá-lo, você deve inicializar o projeto e instalar o webpack localmente (projetos diferentes podem usar versões diferentes).
- Ele suporta pacote de configuração zero: a entrada de pacote padrão é src / index.js
- Suporta escrita modular: existe uma relação de referência mútua ( importação, exportação ) entre os arquivos js .
- Ele pode empacotar vários js com relacionamento de referência em um arquivo e colocá-lo em dist / main.js por padrão .
- O comando de empacotamento é:
npx webpack
Se houver alguma falha, por favor, avise, para
continuar, continue atualizando!
Faça progressos juntos!