Le webpack est-il basé sur node.js ?-js tutoriel-php.cn

Le webpack est-il basé sur node.js ?

青灯夜游

Libérer： 2022-07-12 18:57:20

original

2947 Les gens l'ont consulté

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".

Le webpack est-il basé sur node.js ?

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

Copier après la connexion

② 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

Copier après la connexion

Utilisez cnpm pour installer webpack :

cnpm install webpack -g

Copier après la connexion

Créer un projet

Ensuite, nous créons un répertoire app :

mkdir app

Copier après la connexion

Ajoutez le fichier runoob1.js dans le répertoire app, le code est le suivant :

fichier app/runoob1.js

document.write("It works.");

Copier après la connexion

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>

Copier après la connexion

Ensuite, nous utilisons la commande webpack pour empaqueter :

webpack runoob1.js bundle.js

Copier après la connexion

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]

Copier après la connexion

Ouvrez index.html dans le navigateur, le résultat de sortie est le suivant :

Le webpack est-il basé sur node.js ?