Webpack est un outil de chargement/regroupement de ressources front-end. Il effectue une analyse statique basée sur les dépendances des modules, puis génère les ressources statiques correspondantes à partir de ces modules selon les règles spécifiées.

Ce chapitre est testé et vérifié sur la base de Webpack 3.0.

D'après le diagramme, nous pouvons voir que Webpack peut convertir plusieurs ressources statiques telles que js, css et less en un seul fichier statique, ce qui réduit les requêtes de page.

Ensuite, nous présenterons brièvement l'installation et l'utilisation de Webpack.

Installer Webpack

Avant d'installer Webpack, votre environnement local doit prendre en chargenode.js。

Comme l'installation via npm est lente, ce tutoriel utilise le miroir de Taobao et sa commande cnpm. Pour les instructions d'installation et d'utilisation, reportez-vous à :Utilisation du miroir NPM de Taobao。

Installer webpack avec cnpm :

Créer le projet

Ensuite, créons un répertoire app :

Ajoutez un fichier example1.js dans le répertoire app, avec le code suivant :

Ajoutez un fichier index.html dans le répertoire app, avec le code suivant :

Ensuite, nous utilisons la commande webpack pour regrouper :

L'exécution de la commande ci-dessus compilera le fichier example1.js et générera un fichier bundle.js. En cas de 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] ./example1.js 29 bytes {0} [built]

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

Créez un deuxième fichier JS

Ensuite, nous créons un autre fichier js example2.js, avec le code suivant :

Mettez à jour le fichier example1.js, avec le code suivant :

Ensuite, nous utilisons la commande webpack pour regrouper :

Ouvrez-le dans le navigateur, et le résultat de sortie est le suivant :

webpack effectue une analyse statique basée sur les dépendances des modules, et ces fichiers (modules) seront inclus dans le fichier bundle.js. Webpack attribue un id unique à chaque module et utilise cet id pour indexer et accéder au module. Lorsque la page démarre, le code dans example1.js est exécuté en premier, et les autres modules sont exécutés lorsque require est exécuté.

LOADER

Webpack lui-même ne peut gérer que les modules JavaScript. Si vous devez traiter d'autres types de fichiers, vous devez utiliser des loaders pour la conversion.

Par conséquent, si nous devons ajouter des fichiers CSS à notre application, nous devons utiliser css-loader et style-loader. Ils font deux choses différentes : css-loader parcourt les fichiers CSS, trouve les expressions url() et les traite ; style-loader insère le code CSS d'origine dans une balise style de la page.

Ensuite, nous utilisons la commande suivante pour installer css-loader et style-loader (l'installation globale nécessite le paramètre -g).

Après avoir exécuté la commande ci-dessus, un répertoire node_modules sera généré dans le répertoire courant. C'est le répertoire d'installation de css-loader et style-loader.

Ensuite, créez un fichier style.css, avec le code suivant :

Modifiez le fichier example1.js, avec le code suivant :

Ensuite, nous utilisons la commande webpack pour regrouper :

Ouvrez-le dans le navigateur, et le résultat de sortie est le suivant :

Lorsque vous importez des fichiers CSS, vous devez écrire le préfixe du loader!style-loader!css-loader!Bien sûr, nous pouvons automatiquement associer le loader requis en fonction du type de module (extension). Dans le fichier example1.js, remplacezrequire("!style-loader!css-loader!./style.css")Remplacer parrequire("./style.css") ：

Exécutez ensuite :

Ouvrez-le dans le navigateur, et le résultat de sortie est le suivant :

Évidemment, ces deux façons d'utiliser les loaders ont le même effet.

Fichier de configuration

Nous pouvons placer certaines options de compilation dans un fichier de configuration pour une gestion unifiée :

Créez un fichier webpack.config.js, avec le code suivant :

Ensuite, il nous suffit d'exécuter la commande webpack pour générer le fichier bundle.js :

Une fois la commande webpack exécutée, elle chargera par défaut le fichier webpack.config.js dans le répertoire courant.

Plugins

Les plugins sont spécifiés dans l'option plugins de la configuration de webpack, et servent à accomplir des tâches que les loaders ne peuvent pas faire.

Webpack est livré avec quelques plugins intégrés, et vous pouvez installer des plugins supplémentaires via cnpm.

Pour utiliser les plugins intégrés, vous devez les installer avec la commande suivante :

Par exemple, nous pouvons installer le plugin intégré BannerPlugin pour afficher des informations de commentaire en haut du fichier.

Modifiez webpack.config.js, avec le code suivant :

Puis exécutez :

webpack

Ouvrez bundle.js, et vous pouvez voir les informations de commentaire que nous avons spécifiées en haut du fichier.

Environnement de développement

À mesure que le projet grandit, le temps de compilation de webpack devient plus long. Vous pouvez utiliser des paramètres pour que la sortie de compilation inclue la progression et les couleurs.

Si vous ne voulez pas recompiler à chaque fois qu'un module est modifié, vous pouvez activer le mode watch. Une fois le mode watch activé, les modules inchangés sont mis en cache en mémoire après la compilation et ne sont pas recompilés à chaque fois, donc la vitesse globale du mode watch est très rapide.

Bien sûr, nous pouvons utiliser le serveur de développement webpack-dev-server. Ainsi, nous pouvons démarrer un serveur web express pour ressources statiques via localhost:8080, et il exécutera automatiquement webpack en mode watch. Ouvrir http://localhost:8080/ ou http://localhost:8080/webpack-dev-server/ dans le navigateur vous permet de parcourir les pages du projet et la sortie des ressources compilées. Il écoute aussi les changements en temps réel via un service socket.io et rafraîchit automatiquement la page.

Ouvrez http://localhost:8080/ dans le navigateur, et le résultat de sortie est le suivant :