Symfony et Webpack

Bonjour,

Avant la sortie du framework Symfony 3, nous utilisions Assetics pour gérer les assets el les dépendances de nos projets.

Nous utilisons maintenant un outil plus optimisé, nommé Webpack Encore, basé sur Webpack et Node.

Selon la documentation :

Webpack Encore est un moyen simple d'intégrer Webpack à votre application. Il englobe Webpack, en vous offrant une API propre et puissante pour le regroupement de modules JavaScript, le pré-processeur CSS et JS, ainsi que la compilation et la réduction des assets. Encore vous offre un système de gestion professionnel des assets.

Voici un exemple de configuration minimale d'Encore :

// webpack.config.js
var Encore = require('@symfony/webpack-encore');

Encore
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')
    // only needed for CDN's or sub-directory deploy
    //.setManifestKeyPrefix('build/')

    /*
     * ENTRY CONFIG
     *
     * Add 1 entry for each "page" of your app
     * (including one that's included on every page - e.g. "app")
     *
     * Each entry will result in one JavaScript file (e.g. app.js)
     * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
     */
    .addEntry('app', './assets/js/app.js')
    //.addEntry('page1', './assets/js/page1.js')
    //.addEntry('page2', './assets/js/page2.js')

    // will require an extra script tag for runtime.js
    // but, you probably want this, unless you're building a single-page app
    .enableSingleRuntimeChunk()

    .cleanupOutputBeforeBuild()
    .enableSourceMaps(!Encore.isProduction())
    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())

    // uncomment if you use TypeScript
    //.enableTypeScriptLoader()

    // uncomment if you use Sass/SCSS files
    //.enableSassLoader()

    // uncomment if you're having problems with a jQuery plugin
    //.autoProvidejQuery()
;

module.exports = Encore.getWebpackConfig();

Voici les lignes de commande qui sont les plus utilisées:

yarn encore dev # Compile assets once
yarn encore dev --watch # Re-compile assets automatically when files change
yarn encore production # Deploy to production

Si vous souhaitez utiliser npm au lieu de yarn, vous pouvez ajouter encore au fichier package.json dans la section scripts.

Comme ceci :

// package.json 
"scripts": {
    "encore": "encore"
}

Vous pourrez lancer encore via npm :

npm run encore --dev
npm run encore --dev --watch

A très bientôt,

Mathieu