webpack est un module bundler. Son objectif principal est de regrouper des fichiers JavaScript pour les utiliser dans un navigateur, mais il est également capable de transformer, de regrouper ou d’emballer à peu près n’importe quelle ressource ou actif.
- Table des matières
- Installer
- Introduction
- Démarrer
- Compatibilité des navigateurs
- Concepts
- Plugins
- Chargeurs
- Fichiers
- JSON
- Transpile
- Templating
- Stylisme
- Frameworks
- Performance
- Formats de modules
- Fractionnement du code
- Optimisations
- Contribuer
- Créer vos propres plugins et chargeurs
- Support
- Licence
- Core Team
- Sponsor
- Partenaires Premium
- Autres backers et sponsors
- Sponsors or
- Sponsors argent
- Sponsors de bronze
- Backers
- Remerciements spéciaux à
Table des matières
- Installation
- Introduction
- Concepts
- Contribuer
- Support
- Core Team
- Sponsoring
- Premium. Partenaires
- Autres soutiens et sponsors
- Sponsors or
- Sponsors argent
- Sponsors bronze
- Soutiens
- Merciements spéciaux
Installer
Installer avec npm :
npm install --save-dev webpack
Installation avec yarn:
yarn add webpack --dev
Introduction
webpack est un bundler pour modules. Son objectif principal est de regrouper des fichiers JavaScript pour les utiliser dans un navigateur, mais il est également capable de transformer, de regrouper ou d’empaqueter à peu près n’importe quelle ressource ou actif.
TL;DR
- Bundles ES Modules, CommonJS, et modules AMD (même combinés).
- Peut créer un seul bundle ou plusieurs morceaux qui sont chargés de manière asynchrone au moment de l’exécution (pour réduire le temps de chargement initial).
- Les dépendances sont résolues pendant la compilation, ce qui réduit la taille de l’exécution.
- Les chargeurs peuvent prétraiter les fichiers pendant la compilation, par exemple TypeScript vers JavaScript, les chaînes Handlebars vers les fonctions compilées, les images vers Base64, etc.
- Système de plugins très modulaire pour faire tout ce que votre application exige d’autre.
Démarrer
Consultez le guide de démarrage rapide de webpack et les autres guides.
webpack prend en charge tous les navigateurs conformes à ES5 (IE8 et moins ne sont pas pris en charge).webpack a également besoin de Promise pour import() et require.ensure(). Si vous souhaitez prendre en charge des navigateurs plus anciens, vous devrez charger un polyfill avant d’utiliser ces expressions.
Concepts
Plugins
webpack possède une interface de plugin riche. La plupart des fonctionnalitésau sein de webpack lui-même utilisent cette interface de plugin. Cela rend webpack trèsflexible.
| Nom | Statut | Taille d’installation | Description |
|---|---|---|---|
| mini…css-extract-plugin | Extrait les CSS dans des fichiers séparés. Il crée un fichier CSS par fichier JS qui contient du CSS. | ||
| compression-webpack-plugin | Prépare les versions compressées des actifs pour les servir avec Content-Encoding | ||
| html-webpack-.plugin | Simplifie la création de fichiers HTML (index.html) pour servir vos bundles |
Chargeurs
webpack permet l’utilisation de chargeurs pour prétraiter les fichiers. Cela vous permet de regrouper une ressource statique bien au-delà de JavaScript. Vous pouvez facilement écrire vos propres loaders en utilisant Node.js.
Les loaders sont activés en utilisant des préfixes loadername! dans les déclarations require(),ou sont automatiquement appliqués via regex à partir de votre configuration webpack.
Fichiers
| Nom | Statut | Taille de l’installation | Description |
|---|---|---|---|
| raw-loader | Charge le contenu brut d’un fichier (utf-8) | ||
| val-loader | Exécute le code en tant que module et considère les exportations comme du code JS | ||
| url-loader | Fonctionne comme le chargeur de fichiers, mais peut retourner une Url de données si le fichier est plus petit qu’une limite | ||
| file-loader | Emet le fichier dans le dossier de sortie et retourne l’url (relatif) |
JSON
| Nom | Etat | Taille de l’installation | Description |
|---|---|---|---|
| Charge et transpile un fichier CSON |
Transpile
| Nom | Statut | Taille de l’installation | Description |
|---|---|---|---|
| Charge le code ES2015+ et le transpose en ES5 à l’aide de Babel | |||
| Charge le code ES2015+ et le transpile en ES5 en utilisant Traceur | |||
| Charge TypeScript comme JavaScript | |||
| Charge CoffeeScript comme JavaScript |
Templating
| Nom | Statut | Taille de l’installation | Description |
|---|---|---|---|
| Exports HTML comme chaîne de caractères, nécessite des références à des ressources statiques | |||
| Charge les modèles de Pug et renvoie une fonction | |||
| Compile Markdown en HTML | |||
| Charge et transforme un fichier HTML en utilisant PostHTML | |||
| Compile les guidons en HTML |
Stylisme
| Nom | Statut | Taille de l’installation | Description |
|---|---|---|---|
<style> |
Ajouter les exportations d’un module comme style au DOM | ||
| Charge le fichier CSS avec les importations résolues et retourne le code CSS | |||
| Charge et compile un fichier LESS | |||
| Charge et compile un fichier Sass/SCSS | |||
| Charge et compile un fichier Stylus | |||
| Charge et transforme un fichier CSS/SSS en utilisant PostCSS |
Frameworks
| Nom | Statut | Taille de l’installation | Description |
|---|---|---|---|
| Charge et compile les composants Vue | |||
Traiter le HTML & CSS avec le préprocesseur de son choix et les require()composants Web comme des modules de première classe |
|||
| Charge et compile les composants Angular 2 | |||
| Riot official webpack loader |
Performance
webpack utilise des E/S asynchrones et possède plusieurs niveaux de cache. Cela rend webpack rapide et incroyablement rapide sur les compilations incrémentales.
Formats de modules
webpack supporte les modules ES2015+, CommonJS et AMD dès la boîte. Il effectue des analyses statiques astucieuses sur l’AST de votre code. Il dispose même d’un moteur d’évaluation pour évaluer des expressions simples. Cela vous permet de prendre en charge la plupart des bibliothèques existantes dès la boîte.
Fractionnement du code
webpack vous permet de fractionner votre base de code en plusieurs chunks. Les chunks sont chargés de manière asynchrone au moment de l’exécution. Cela réduit le temps de chargement initial.
Optimisations
webpack peut effectuer de nombreuses optimisations pour réduire la taille de sortie de votreJavaScript en dédupliquant les modules fréquemment utilisés, en les minifiant et en vous donnant le contrôle total de ce qui est chargé initialement et de ce qui est chargé au moment de l’exécutiongrâce au fractionnement du code. Il peut également rendre vos morceaux de code amis du cache en utilisant des hachages.
Contribuer
Nous voulons que la contribution à webpack soit amusante, agréable et éducative pour tout le monde, et pour tout le monde. Nous avons un écosystème vibrant qui s’étend au-delà de ce seul repo. Nous vous invitons à consulter n’importe quel dépôt de notre organisation ou de l’organisation webpack-contrib qui abrite tous nos chargeurs et plugins.
Les contributions vont bien au-delà des pull requests et des commits. Bien que nous aimions vous donner l’opportunité de mettre votre empreinte sur webpack, nous sommes également ravis de recevoir une variété d’autres contributions, notamment :
- Mises à jour de la documentation, améliorations, conceptions ou corrections de bogues
- Corrections orthographiques ou grammaticales
- README.md corrections ou remaniements
- Ajout de tests unitaires, ou fonctionnels
- Traitement des problèmes GitHub — en particulier déterminer si un problème persiste encore ou est reproductible.
- Recherche #webpack sur twitter et aider quelqu’un d’autre qui a besoin d’aide
- Enseigner les autres comment contribuer à l’un des nombreux dépôts de webpack !
- Bloguer, parler ou créer des tutoriels sur l’une des nombreuses fonctionnalités de webpack.
- Aider les autres dans notre canal gitter webpack.
Pour commencer, jetez un œil à notre documentation sur la contribution.
Si vous êtes inquiet ou ne savez pas par où commencer, vous pouvez toujours joindre Sean Larkin (@TheLarkInn) sur Twitter ou simplement soumettre un problème et un mainteneur peut aider à vous donner des conseils !
Nous avons également commencé une série sur notre publication Medium appelée The Contributor’s Guide to webpack. Nous vous invitons à la lire et à poster vos questions ou réponses si vous avez encore besoin d’aide.
Vous cherchez à parler de webpack ? Nous serions ravis de passer en revue votre résumé de conférence/DPC ! Vous pouvez l’envoyer par courriel à webpack opencollective com et nous pouvons donner des pointeurs ou des conseils !!!
Créer vos propres plugins et chargeurs
Si vous créez un chargeur ou un plugin, nous voudrions <3 que vous l’ouvriez à la source, et le mettiez sur npm. Nous suivons la convention de nommage x-loader, x-webpack-plugin.
Support
Nous considérons webpack comme un outil de bas niveau utilisé non seulement individuellement mais aussi en couches sous d’autres outils géniaux. En raison de sa flexibilité, webpack n’est pas toujours la solution d’entrée de gamme la plus facile, cependant nous croyons qu’il est le plus puissant. Cela dit, nous sommes toujours à la recherche de moyens d’améliorer et de simplifier l’outil sans compromettre sa fonctionnalité. Si vous avez des idées sur les moyens d’y parvenir, nous sommes tout ouïe !
Si vous débutez, jetez un œil à notre nouvelle page de docs et concepts. Cela a un aperçu de haut niveau qui est excellent pour les débutants !
Vous cherchez des docs sur webpack 1 ? Veuillez consulter l’ancien wiki, mais notez que cette version dépréciée n’est plus supportée.
Si vous voulez discuter de quelque chose ou si vous avez simplement besoin d’aide, voici notre salle Gitter où il y a toujours des individus qui cherchent à aider !
Si vous avez toujours des difficultés, nous aimerions que vous posiez une question sur StackOverflow avec le tag webpack. Il est beaucoup plus facile de répondre aux questions qui incluent votre webpack.config.js et les fichiers pertinents ! Donc, si vous pouvez les fournir, nous serions extrêmement reconnaissants (et plus susceptibles de vous aider à trouver la réponse !)
Si vous êtes doué pour twitter, vous pouvez tweeter #webpack avec votre question et quelqu’un devrait être en mesure d’atteindre et d’aider également.
Si vous avez découvert un 🐜 ou avez une suggestion de fonctionnalité, n’hésitez pas à créer une question sur Github.
Licence
Core Team
 Tobias Koppers Core Fondateur de webpack |
 Johannes Ewald Loaders & Plugins Adopteur précoce de webpack |
 Sean T. Larkin Relations publiques Fondateur de l’équipe centrale |
 Kees Kluskens Développement . Sponsor |
Sponsor
La plupart des membres de l’équipe centrale, les contributeurs de webpack et les contributeurs de l’écosystème font ce travail open source pendant leur temps libre. Si vous utilisez webpack pour une tâche sérieuse, et que vous souhaitez que nous y investissions plus de temps, faites un don. Ce projet augmente également votre revenu/productivité. Il rend le développement et les applications plus rapides et il réduit la bande passante nécessaire.
Voici comment nous utilisons les dons :
- Permettre à l’équipe centrale de travailler sur webpack
- Remercier les contributeurs s’ils ont investi une grande quantité de temps dans la contribution
- Soutenir les projets de l’écosystème qui ont une grande valeur pour les utilisateurs
- Soutenir les projets qui. sont les plus votés (travaux en cours)
- Coût de l’infrastructure
- Frais de gestion de l’argent
Partenaires Premium
Autres backers et sponsors
Avant que nous commencions à utiliser OpenCollective, les dons étaient faits de manière anonyme. Maintenant que nous avons fait le changement, nous aimerions reconnaître ces sponsors (et ceux qui continuent à faire des dons en utilisant OpenCollective). Si nous avons oublié quelqu’un, veuillez nous envoyer un PR, et nous vous ajouterons à cette liste.
Sponsors or
Devenez un sponsor or et obtenez votre logo sur notre README sur Github avec un lien vers votre site.
Sponsors argent
Devenez un sponsor argent et obtenez votre logo sur notre README sur Github avec un lien vers votre site.
Sponsors de bronze
Devenez un sponsor de bronze et obtenez votre logo sur notre README sur Github avec un lien vers votre site.
Backers
Devenez un backer et obtenez votre image sur notre README sur Github avec un lien vers votre site.
Remerciements spéciaux à
(Par ordre chronologique)
- @google pour Google Web Toolkit (GWT), qui vise à compiler Java en JavaScript. Il présente un Code Splitting similaire à celui de webpack.
- @medikoo pour modules-webmake, qui est un projet similaire. webpack est né parce que je voulais un Code Splitting pour modules-webmake. Il est intéressant de noter que la question du Code Splitting est toujours ouverte (merci également à @Phoscur pour la discussion).
- @substack pour browserify, qui est un projet similaire et la source de nombreuses idées.
- @jrburke pour require.js, qui est un projet similaire et la source de nombreuses idées.
- @defunctzombie pour la spécification browser-field, qui rend les modules disponibles pour node.js, browserify et webpack.
- Chaque utilisateur précoce de webpack, qui a contribué à webpack en écrivant des problèmes ou des PR. Vous avez influencé la direction…
- @shama, @jhnns et @sokra pour maintenir ce projet
- Chaque personne qui a écrit un chargeur pour webpack. Vous êtes l’écosystème…
- Tout le monde que j’ai oublié de mentionner ici, mais qui a aussi influencé webpack.