Guide d'installation pour Webpack Xiaobai

Guide d'installation Webpack

Parce que la plupart des Xiaobai marchaient toujours sur divers stands lorsqu'ils contactaient webpack, donc. Cet article vous montrera comment installer webpack

Au cours de ce processus, vous pouvez rencontrer des erreurs qui ne sont pas traitées dans cet article. Vous pouvez consulter les trois aspects pour vérifier l'échec de l'installation

1. Prérequis

Avant de commencer, assurez-vous que la dernière version de Node.js est installée

À cause du mur, cela peut conduire au npm installphénomène que tout le monde est bloqué à l' époque, je vous suggère donc de le configurer en premier.

Il existe actuellement deux méthodes, l'une consiste à installer le miroir cnpm et l'autre à utiliser un proxy. La première peut rencontrer de nouveaux problèmes, c'est pourquoi cet article recommande la deuxième méthode. Ouvrez la fenêtre de commande cmd et entrez la commande suivante

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

Les commandes suivantes telles que install fonctionnent toujours via npm, pas cnpm.

2. Installez Webpack

• Installation locale

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

• Installation globale

  npm install --global webpack
  

Je suggère une installation globale ici, principalement pour faciliter l'apprentissage de Xiaobai. Si la version rencontre des problèmes dans certains projets à l'avenir, désinstallez-la pour une installation locale.

3. Installez webpack-cli

Lorsque vous avez terminé l'étape précédente, les webpack -vinvites de problème suivantes peuvent apparaître lors de l' affichage de la version via la commande :

L'invite indique qu'il doit être installé webpack-cli, ne vous inquiétez pas, entrez y et appuyez sur Entrée pour l'installer automatiquement

Certains amis peuvent encore rencontrer de nouveaux problèmes à cette étape, comme suit:

Étant donné que nous procédons à l'installation dans la fenêtre de commande cmd, nous recevrons un indice qui ne peut pas être trouvé. Ne vous inquiétez pas à ce sujet. Cela ressemble à l'installation du pack Web, installez-le simplement dans le monde entier.

npm install webpack-cli -g

Une fois l'installation terminée, vérifiez à nouveau la version:

4. Configurer le mode d'emballage

Après avoir terminé les étapes précédentes, vous pouvez créer un package, mais le package main et js sont affichés sur une seule ligne, ce qui n'est pas pratique à lire, et il y aura des avertissements:

Il n’est pas difficile de savoir si vous regardez attentivement son invite, car le mode n’est pas configuré.

Ne vous inquiétez pas, nous avons un nouveau fichier, le nom du fichier est webpack.config.js, la configuration est la suivante, signifie probablement dire à Webpack, nous voulons l'environnement de production

module.exports = {
	mode: 'development'
}

Ici, c'est presque la même chose. J'espère que tout le monde pourra installer webpack sans problème. S'il y a un problème avec cette méthode, veuillez le signaler.