webpack é baseado em node.js. Webpack é uma ferramenta de empacotamento de módulo estático para aplicativos JavaScript modernos. Ele é desenvolvido com base em node.js. Ele requer suporte ao componente node.js ao usá-lo. Ele precisa ser instalado usando npm ou cnpm, e a sintaxe é "cnpm install webpack. -g".
O ambiente operacional deste tutorial: sistema Windows 7, nodejs versão 16, computador DELL G3.
Webpack é uma ferramenta de compilação de código com entrada, saída, carregador e plug-ins. webpack é uma ferramenta de agrupamento de módulos estáticos para aplicativos JavaScript modernos. Ele realizará análises estáticas com base nas dependências do módulo e, em seguida, gerará recursos estáticos correspondentes para esses módulos de acordo com regras especificadas.
Quando o webpack processa um aplicativo, ele constrói internamente um gráfico de dependência que mapeia cada módulo exigido pelo projeto e gera um ou mais pacotes configuráveis.
Webpack é uma ferramenta de empacotamento front-end desenvolvida com base em node.js. Ele requer suporte ao componente node.js ao usá-lo.
Instale o Webpack
① A operação do Webpack depende do Node.js, portanto, o Node.js precisa ser instalado primeiro.
Após a conclusão da instalação, insira as duas linhas de comando a seguir na janela da linha de comando. Se um número de versão for exibido, a instalação foi bem-sucedida.
$ node -v$ npm -v
② Então você pode instalar o Webpack através do npm (uma ferramenta de gerenciamento de pacotes baseada em Node.js.
Como a fonte do npm está no exterior, a velocidade de instalação pode ser lenta). É recomendado que você use o espelho npm cnpm do Taobao. Mas uma coisa a notar é que alguns pacotes no cnpm serão diferentes (em geral, isso não afeta o uso).
Você pode completar a configuração do cnpm através da seguinte linha de código
$ npm install -g cnpm --registry=https). ://registry .npm.taobao.org
Use cnpm para instalar o webpack:
cnpm install webpack -g
Crie um projeto
Em seguida, criamos um aplicativo de diretório:
mkdir app
Adicione o arquivo runoob1.js no diretório do aplicativo, o código é o seguinte:
arquivo app/runoob1.js
document.write ("Funciona."); Adicione o arquivo index.html no diretório do aplicativo, o código é o seguinte:
arquivo app/index.html
<html>
<cabeça>
<meta charset="utf-8">
</head>
<corpo>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html> Em seguida, usamos o comando webpack para empacotar:
webpack runoob1.js bundle.js
A execução do comando acima compilará o arquivo runoob1.js e gerará o arquivo bundle.js. Após o sucesso, as informações de saída serão as seguintes:
Hash. : a41c6217554e666594cb
Versão: webpack 1.12.13
Tempo: 50ms
Nomes de pedaços de tamanho de ativo
bundle.js 1,42 kB 0 [emitido] principal
[0] ./runoob1.js 29 bytes {0} [construído] Abra index.html no navegador, os resultados de saída são os seguintes:
