Webpack Encore est un moyen d’intégrer Webpack dans une application.
Il donne accès à une API propre et puissante pour regrouper des modules JavaScript, prétraiter CSS et JS et compiler et minifier des actifs.
Installation dans Symfony
Installation du paquet de la dépendance par npm. Un package installé peut être un module, un bundle ou une bibliothèque de code.
npm install @symfony/webpack-encore
touch webpack.config.js
Configuration de WebPack
const Encore = require('@symfony/webpack-encore');
Encore
// Add your entry points here
.addEntry('main', './assets/js/main.js')
// Enable CSS pre-processing
.enableSassLoader()
// Enable auto-imports for React
.enableReactPreset()
// Output the bundled assets to the `public/build` directory
.setOutputPath('public/build')
// Enable source maps
.enableSourceMaps(true)
// Write the Webpack configuration
.writeWebpackConfig();
Comment lancer la compilation
npm run encore dev
Dans le template
<script src="build/main.js"></script>
<link rel="stylesheet" href="build/main.css">
Comment compiler pour la production ?
Lancer la commande qui compilera vos actifs pour la production et les écrira dans le dossier public/build
npm run encore production
Utiliser un bundle propre à Symfony plutôt que la bibliothèque
L’installation du bundle WebPackEncoreBundle permet de rendre la compilation automatique des actifs pendant le développement, la prise en charge du système d’actifs Symfony, la version automatique des actifs.
Avec ce bundle la configuration est simplifiée.
Les bundles doivent être mise à jour pour la sécurité de votre application. Les développeurs des bundles corrigent régulièrement des vulnérabilités de sécurité. En mettant à jour vos bundles, vous vous assurez que votre application est à l’abri des dernières menaces de sécurité.
Exemple de mise à jour du bundle.
composer update symfony/webpack-encore-bundle