Maison > Article > interface Web > Le webpack est-il basé sur node.js ?
Le webpack est-il basé sur node.js ?
- 青灯夜游original
- 2022-07-12 18:57:202974parcourir
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 nécessite Node.js, donc Node.js doit être installé en premier.
Une fois l'installation terminée, entrez les deux lignes de commandes suivantes dans la fenêtre de ligne de commande. Si le 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)
Parce que la source de npm est à 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 compléter 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("It works.");Ajouter le fichier index.html dans le répertoire app, le code est le suivant :
fichier app/index.html
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</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érez le fichier bundle.js. Après succès, les informations de sortie sont les suivantes :
Hash: a41c6217554e666594cb
Version: webpack 1.12.13
Time: 50ms
Asset Size Chunks Chunk Names
bundle.js 1.42 kB 0 [emitted] main
[0] ./runoob1.js 29 bytes {0} [built]Ouvrez index.html dans le navigateur, le résultat de sortie est le suivant :
Pour plus de connaissances sur les nœuds, veuillez visiter : tutoriel nodejs !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!