Guia de instalação para webpack Xiaobai

Guia de instalação do Webpack

Porque a maioria dos Xiaobai sempre pisou em vários buracos ao entrar em contato com o webpack, então. Este artigo mostrará como instalar o webpack

Durante esse processo, você pode encontrar alguns erros que não são abordados neste artigo. Você pode consultar os três aspectos para verificar se a instalação não foi bem-sucedida.

1. Pré-requisitos

Antes de começar, certifique-se de ter a versão mais recente do Node.js instalada

Por causa da parede, pode levar ao npm installfenômeno de que todos estão presos no momento, então sugiro que você configure primeiro.

Existem atualmente dois métodos, um é instalar o espelho cnpm e o outro é usar um proxy. O primeiro pode encontrar alguns novos problemas, então este artigo recomenda o segundo método. Abra a janela de comando cmd e digite o seguinte comando

npm config set registry https://registry.npm.taobao.org

Os comandos subsequentes, como install, ainda funcionam por meio do npm, não do cnpm.

2. Instale o webpack

• Instalação local

  npm install --save-dev webpack
  # 或指定版本
  npm install --save-dev webpack@<version>
  

• Instalação global

  npm install --global webpack
  

Eu sugiro uma instalação global aqui, principalmente para a conveniência do aprendizado de Xiaobai. Se a versão encontrar problemas em alguns projetos no futuro, desinstale-a para instalação local.

3. Instale o webpack-cli

Ao concluir a etapa anterior, os webpack -vseguintes prompts de problema podem aparecer ao visualizar a versão por meio do comando :

O prompt indica que ele deve ser instalado webpack-cli, não se preocupe, digite y e pressione Enter para instalar automaticamente

Alguns amigos ainda podem encontrar novos problemas nesta etapa, da seguinte maneira:

Como estamos instalando na janela de comando cmd, seremos avisados ​​com uma dica que não pode ser encontrada. Não se preocupe com isso. É semelhante à instalação do webpack, basta instalá-lo globalmente.

npm install webpack-cli -g

Após a conclusão da instalação, verifique a versão novamente:

4. Configure o modo de empacotamento

Depois de concluir as etapas anteriores, você pode empacotar, mas o principal e js empacotados são exibidos em uma única linha, o que não é conveniente de ler, e haverá avisos:

Não é difícil saber se você olhar seu prompt com atenção, porque o modo não está configurado.

Não se preocupe, temos um novo arquivo, o nome do arquivo é webpack.config.js, a configuração é a seguinte, provavelmente significa dizer ao webpack, queremos o ambiente de produção

module.exports = {
	mode: 'development'
}

Aqui é quase o mesmo. Espero que todos possam instalar o webpack sem problemas. Se houver algum problema com este método, indique.