Le serveur de développement Webpack regarde Twig

Le chargeur doit également connaître l'emplacement des fichiers .twig , qui dans Symfony 4 se trouvent dans le répertoire / templates . Compte tenu de la structure par défaut, cela devrait le faire fonctionner pour vous:

  ...
  .addLoader({
    test: /\.twig$/,
    loader: 'raw-loader',
    include: [
      path.resolve(__dirname, "templates")
    ],
  },)
  ...

Il semble qu'il n'y ait aucun moyen de faire cela (lisez plus à ce sujet a>). Comme le mentionne l'interlocuteur, vous pouvez le faire avec BrowserSync. Ma configuration Symfony préférée est d'avoir deux terminaux en cours d'exécution:

Prérequis

browser-sync start --proxy "https://127.0.0.1:8000/" --files "templates"

Démarrer le serveur Symfony sur https://127.0.0.1:8000/ et compiler les actifs sur https: // localhost: 8010 / :

symfony server:start -d ; yarn encore dev-server --https --port 8010

Deuxième terminal h3 >

Rechargez la demande de votre navigateur pour https: // localhost: 3000 / chaque fois qu'un fichier Twig est modifié:

npm install -g browser-sync

Si vous n'avez besoin que de la synchronisation du navigateur, vous pouvez créer bs-config.js:

browser-sync start --config bs-config.js

puis exécuter

module.exports = {
    "files": [
        "templates/**/*.twig",
        "src/**/*.php"
    ],
    "proxy": "https://localhost:8000",
};

n'oubliez pas de accepter le "site dangereux" au démarrage

Aujourd'hui, l'année 2020, j'ai deux solutions:

Solution de configuration Webpack

Comme vous l'aviez dit: J'ai vu des choses sur les options --watchContentBase et contentBase ... , cela n'a rien à voir avec encore. Il s'agit d'une configuration Webpack par défaut et vous pouvez en savoir plus sur document Webpack ici

Selon documentation Advanced Webpack Config ici , vous pouvez étendre les configurations du pack Web en appelant var config = Encore.getWebpackConfig ();

J'ai implémenté comme indiqué dans le code ci-dessous. Pour mon cas, cela fonctionne très bien.

// webpack.config.js
const WatchExternalFilesPlugin = require('webpack-watch-files-plugin').default;

Encore
    // ...your code

     .addPlugin(new WatchExternalFilesPlugin({
            files: [
                '/templates', // watch files in templates folder
                '/src', // watch files in src folder
                '!../var', // don't watch files in var folder (exclude)
            ],
            verbose: true
        }))

    //...your code
;

Une autre solution

Si vous avez besoin d'une implémentation simple, vous pouvez utiliser: webpack-watch-files-plugin . Je préfère cela, au moment où vous lirez cette réponse, elle pourrait être abandonnée mais il y en a beaucoup d'autres avec les mêmes fonctionnalités. Dans documentation Symfony ici , vous pouvez implémenter des chargeurs personnalisés et Plugins comme ci-dessous. En utilisant le plugin mentionné ci-dessus, nous pouvons l'implémenter comme suit:

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

// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addEntry('global', './assets/app.js')

    // ... Your other encore code


    // EXTEND/OVERRIDE THE WEBPACK CONFIG

    const fullConfig = Encore.getWebpackConfig();
    fullConfig.name = 'full';

    // watch options poll is used to reload the site after specific set time
    // polling is useful when running Encore inside a Virtual Machine
    // more: https://webpack.js.org/configuration/watch/
    fullConfig.watchOptions = {
        poll: true,
        ignored: /node_modules/
    };

    fullConfig.devServer = {
        public: 'http://localhost:3000',
        allowedHosts: ['0.0.0.0'],
        // extend folder to watch in a symfony project
        // use of content base
        // customize the paths below as per your needs, for this simple 
        //example i will leave them as they are for now.
        contentBase: [
            path.join(__dirname, 'templates/'), // watch twig templates folder
            path.join(__dirname, 'src/') // watch the src php folder
        ],
        // enable watching them
        watchContentBase: true,
        compress: true,
        open: true,
        disableHostCheck: true,
        progress: true,
        watchOptions: {
            watch: true,
            poll: true
        }
    };


// export it
module.exports = fullConfig;

Cheers. Bon codage!