Сервер разработки Webpack наблюдает за Twig

Загрузчику также необходимо знать расположение файлов .twig, которые в Symfony 4 находятся в каталоге /templates. Учитывая структуру по умолчанию, это должно заставить ее работать на вас:

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

Похоже, что нет возможности это сделать (прочтите подробнее об этом). Как упоминает спрашивающий, вы можете сделать это с помощью BrowserSync. Я предпочитаю установку Symfony, чтобы работало два терминала:

Предпосылки

Установите BrowserSync:

npm install -g browser-sync

Первый терминал

Запустите сервер Symfony на https://127.0.0.1:8000/ и создайте активы на https: // localhost: 8010 /:

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

Второй терминал

Перезагружайте запрос вашего браузера для https: // localhost: 3000 / каждый раз, когда файл Twig изменяется:

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

Если вам нужна только синхронизация браузера, вы можете создать bs-config.js:

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

а затем запустить

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

не забудьте принять "опасный сайт" при запуске

Сегодня, в 2020 году, у меня есть два решения:

Конфигурационное решение Webpack

Как вы уже сказали: I've seen things about --watchContentBase and contentBase options..., это не имеет ничего общего с выходом на бис. Это конфигурация веб-пакета по умолчанию, и вы можете узнать больше из документ webpack здесь

Согласно Документы Advanced Webpack Config здесь вы можете расширить конфигурации веб-пакетов, вызвав var config = Encore.getWebpackConfig();

Я реализовал, как показано в приведенном ниже коде. В моем случае он работает нормально.

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

Другое решение

Если вам нужна простая реализация, вы можете использовать: webpack-смотреть-файлы-плагин. Я предпочитаю это, к тому времени, когда вы прочитаете этот ответ, он может быть оставлен, но есть много других с такой же функциональностью. В Документы Symfony здесь вы можете реализовать пользовательские загрузчики и плагины, как показано ниже. Используя вышеупомянутый плагин, мы можем реализовать его следующим образом:

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

Ваше здоровье. Удачного кодирования!

С Symfony 5.4 и Encore 1.0.0 вы можете настроить devServer вручную в webpack.config.js

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