webpack est basé sur node.js. Webpack est un outil d'empaquetage de modules statiques pour les applications JavaScript modernes. Il est développé sur la base de node.js. Il nécessite la prise en charge du composant node.js lors de son utilisation. Il doit être installé à l'aide de npm ou cnpm, et la syntaxe est "cnpm install webpack". -g".
L'environnement d'exploitation de ce tutoriel : système Windows 7, nodejs version 16, ordinateur DELL G3.
Webpack est un outil de compilation de code avec entrée, sortie, chargeur et plug-ins. webpack est un outil de regroupement de modules statiques pour les applications JavaScript modernes. Il effectuera une analyse statique basée sur les dépendances des modules, puis générera les ressources statiques correspondantes pour ces modules selon les règles spécifiées.
Lorsque webpack traite une application, il crée en interne un graphe de dépendances qui correspond à chaque module requis par le projet et génère un ou plusieurs bundles.
Webpack est un outil de packaging frontal développé sur la base de node.js. Il nécessite la prise en charge du composant node.js lors de son utilisation.
Installer Webpack
① Le fonctionnement de Webpack dépend de Node.js, donc Node.js doit d'abord être installé.
Une fois l'installation terminée, entrez les deux lignes de commandes suivantes dans la fenêtre de ligne de commande. Si un numéro de version apparaît, l'installation est réussie.
$ node -v$ npm -v
② Ensuite, vous pouvez installer Webpack via npm (un outil de gestion de packages basé sur Node.js).
La source de npm étant à l'étranger, la vitesse d'installation peut être lente. Il est recommandé d'utiliser le miroir npm cnpm de Taobao. Mais une chose à noter est que certains packages dans cnpm seront différents (d'une manière générale, cela n'affecte pas l'utilisation).
Vous pouvez terminer la configuration de cnpm via la ligne de code suivante
$ npm install -g cnpm --registry=https). ://registry .npm.taobao.org
Utilisez cnpm pour installer webpack :
cnpm install webpack -g
Créer un projet
Ensuite nous créons un répertoire app :
mkdir app
Ajoutez le fichier runoob1.js dans le répertoire app, le code est le suivant :
fichier app/runoob1.js
document.write ("Ça marche."); Ajoutez le fichier index.html dans le répertoire app, le code est le suivant :
fichier app/index.html
<html>
<tête>
<méta charset="utf-8">
</tête>
<corps>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</corps>
</html> Ensuite, nous utilisons la commande webpack pour empaqueter :
webpack runoob1.js bundle.js
L'exécution de la commande ci-dessus compilera le fichier runoob1.js et générera le fichier bundle.js. Après succès, les informations de sortie sont les suivantes :
Hash. : a41c6217554e666594cb
Version : webpack 1.12.13
Temps : 50 ms
Noms des fragments de taille d'actif
bundle.js 1,42 ko 0 [émis] principal
[0] ./runoob1.js 29 octets {0} [construit] Ouvrez index.html dans le navigateur, les résultats de sortie sont les suivants :
