• Webpack 5 : JS, CSS et assets sont construits avec Webpack.
• Esbuild Loader : pour la transpilation ESNext et TypeScript.
• Eslint : pour le style de code JS.
• Stylelint : pour le style de code CSS.
• CSSNano : pour l'optimisation CSS.
• PostCSS Preset Env : pour la compatibilité avec les propriétés CSS modernes.
• PostCSS PX to REM : pour convertir automatiquement les unités px en rem.
• PostCSS Sort Media Queries : pour combiner plusieurs déclarations de media queries similaires.
• SVGO : pour l'optimisation SVG.
• Image Webpack Loader : pour l'optimisation des images.
• Browser Sync : pour tester votre projet sur différents appareils.

Consultez le fichier wp-dsfr-theme/package.json pour connaître la version actuelle de Node.

Téléchargez et extrayez l'archive zip dans le dossier /themes de votre installation WordPress.

|____wp-admin
|____wp-content
| |____plugins
| |____themes
| | |____wp-dsfr-theme
| |____uploads
|____wp-includes

Se placer ensuite dans le dossier du thème

$ cd wp-content/themes/wp-dsfr-theme

Installation des modules node

$ npm install

Les fichiers de configuration se trouvent dans le répertoire config

Vous pouvez trouver le fichier de configuration commun de Webpack dans webpack.common.js. Pour le mode développement, vous pouvez modifier le fichier webpack.dev.js et pour le mode production, vous pouvez modifier le fichier webpack.prod.js. Vous avez également les loaders dans le fichier loaders.js et les plugins de Webpack dans le fichier plugins.js.

Vous pouvez trouver un fichier .eslintrc pour modifier la configuration d'Eslint.

Exécutez la commande suivante depuis le thème :

$ npm start

$ npm run build

Vous pouvez lancer un rapport de bundle avec la commande suivante :

$ npm run bundle-report