À propos de ce tutoriel
Par défaut le css-loader que l'on a utilisé va chercher à résoudre à travers webpack les fichiers chargé via des @import
et des url()
. Il va donc falloir indiquer, à travers notre configuration, comment gérer les fichiers images et les polices. On pourra aussi appliquer un loader pour optimiser les fichiers.
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'file-loader'
},
{
test: /\.(png|jpg|gif|svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: '[name].[hash:7].[ext]'
}
},
{
loader: 'img-loader',
options: {
enabled: !dev
}
}
]
}
On utilise ici 3 loaders :
file-loader
va déplacer le fichier dans le dossier output et créer le bon chemin pour y accéder.url-loader
va agir comme le file-loader, à un détail prêt. Si le fichier est suffisamment petit alors il sera directement inclue dans le CSS sous format d'url base64.img-loader
permettra d'optimiser les images avec différents outils (on pensera à désactiver ce loader lorsque l'on est en développement grâce à l'optionenabled
)