Webpack dev server watches Twig

Today, the year 2020, i have two solutions:

Webpack config solution

As you had said: I've seen things about --watchContentBase and contentBase options..., this has nothing to do with encore. Its a default webpack configurations and you can learn more from webpack doc here

According to Advanced Webpack Config docs here you can extend webpack configs by calling var config = Encore.getWebpackConfig();

I have implemented as shown in the code below. For my case its working fine.

// 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;

Another solution

If you need a simple implementation you can use: webpack-watch-files-plugin. I prefer this, by the time you are reading this answer it might be abandoned but there many others with same functionality. In Symfony docs here you can implement Custom Loaders & Plugins as below. Using the above mentioned plugin we can implent it as follow:

// 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
;

Cheers. Happy coding!

With Symfony 5.4 and Encore 1.0.0 you can configure devServer mannualy in webpack.config.js

...
 .configureDevServerOptions((options) => {
        options.liveReload = true;
        options.hot = true;
        options.watchFiles = [
            './templates/**/*',
            './src/**/*'
        ]
    })
...

The loader needs to know also the location of the .twig files, which in Symfony 4 are in /templates directory. Considering the default structure, this should make it work for you:

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

It seems that there is no way to do that (read more on this). As the questioner mentions you can do it with BrowserSync. My preferred Symfony setup is to have two terminals running:

Prerequisites

Install BrowserSync:

npm install -g browser-sync

First terminal

Start the Symfony server on https://127.0.0.1:8000/ and build the assets on https://localhost:8010/:

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

Second terminal

Reload your browser's request for https://localhost:3000/ every time a Twig file gets changed:

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

If you need only browser-sync you can create bs-config.js:

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

and then run

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

remember to accept the "dangerous site" at startup