Webpack Encore

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

Documentation Front-end Symfony