Webpack Tutoriel

Webpack est un groupeur de modules qui lit les modules avec des dépendances et produit des actifs statiques représentant ces modules.

Il dispose d’un [* système de chargement *] [1] extensible qui permet aux bundles d’inclure non seulement des ressources Javascript, mais aussi du CSS, des images, du HTML et bien plus encore.

Par exemple, en utilisant le chargeur Javascript intégré, [css-loader][2] et [url-loader][3] :

require("./code.js") // Load Javascript dependency
var css = require("./styles.css"); // Load CSS as a string
var base64Image = require("./image.png"); // Load an image as a base64 string

Deviendrait un seul fichier groupé :

// From code.js
console.log("Hello, World");
// From styles.css
var css = "body { margin: 0; padding: 0; } h1 { color: #FF0000; }";
// From image.png
var base64Image = "data:image/gif;base64,R0lGODlhPQBEAPeoAJosM//AwO/AwHVYZ/z595kzAP/s7P+goOXMv8+fhw/v739/f+8PD98fH/8mJl+fn/9ZWb8/PzWlwv///6wWGbImAPgTEMImIN9gUFCEm/gDALULDN8PAD6atYdCTX9gUNKlj8wZAKUsAOzZz+UMAOsJAP/Z2ccMDA8PD/95eX5NWvsJCOVNQPtfX/8zM8+QePLl38MGBr8JCP+zs9myn/8GBqwpAP/GxgwJCPny78lzYLgjAJ8vAP9fX...";

Les dépendances peuvent être définies dans l’un des styles de module les plus courants (CommonJS et AMD).

[1] : http://webpack.github.io/docs/list-of-loaders.html [2] : https://github.com/webpack/css-loader [3] : https://github.com/webpack/url-loader