watchDirectory option for watchOptions about webpack

[alexander-akait]

Why you need to watch php files by webpack? We have such options for serve (i.e. dev server to reload a page), but I don't see any reasons to just watch them by webpack itself

[sovetski]

Why you need to watch php files by webpack? We have such options for serve (i.e. dev server to reload a page), but I don't see any reasons to just watch them by webpack itself

I put the link if you want to get more details: symfony/webpack-encore#1246

But to explain here, when I use Symfony for example, and I use Bootstrap with "postcss-purgecss", it removes all unused classnames from the build, which means if I put for example "mt-5" classname on my php files (or twig), as it will not detect changes to "watch" and build, it will not include new classnames, so i need to update any js or css file to be able to build and get all used classnames. Let me know if it is not clear

[alexander-akait]

I see your problem, that tools parse php files and extract classes (loader/plugin)?

[sovetski]

I see your problem, that tools parse php files and extract classes (loader/plugin)?

Exactly, it works also with PostCSS. Ex my postcss.config.js file content:

module.exports = {
    plugins: [
        require("autoprefixer"),
        require("@fullhuman/postcss-purgecss")({
            content: [
                // PHP files from "src" and "vendor" directories that contain HTML/Twig templates
                // In "vendor" directory, bundles like "knplabs pagination" are using bootstrap classes
                "./src/**/*.php",
                "./vendor/**/*.php",
                "./vendor/**/*.html",
                "./vendor/**/*.twig",
                "./templates/**/*.twig",
                "./assets/**/*.js",
                "./assets/**/*.css",
            ],
            defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
        }),
    ],
};

The "watch" works as well with js,css but not with php files, default configuration from webpack I guess. Is there any possibility to add our custom files to watch?

[alexander-akait]

We have an API for such purposes and other tools use it (not only webpack, other bundlers too) - https://github.com/webpack-contrib/postcss-loader/blob/master/src/index.js#L191

@fullhuman/postcss-purgecss should use postcss message API, i.e. run this code:

result.messages.push(
  {
    type: "dependency",
    file: "/absolute/path/to/file.php",
    plugin: "@fullhuman/postcss-purgecss",
  }
)

Webpack knows nothing about PHP files, also just watching PHP files and rerun compilation will very ineffective, using such API (example above) webpack rebuild only modules which depend on /absolute/path/to/file.php (i.e. in module where you imported CSS file where class was generated), so you will have fast rebuild.

[alexander-akait]

Anyway, there is more old issue about it #13537, so let's close in favor #13537

[sovetski]

For the people who will come across this issue, my problem has not been solved at all

---

Edit: I found a solution, for me, it was the best one: https://www.npmjs.com/package/webpack-watch-files-plugin

1. npm install --save-dev webpack-watch-files-plugin
2. in webpack.config.js add

const WatchFilesPlugin = require('webpack-watch-files-plugin').default;

module.exports = {
  // ... other Webpack configuration
  plugins: [
new WatchFilesPlugin({
		files: ['src/**/*.php', 'templates/**/*'],
		options: {
			aggregateTimeout: 300, // Optional: Delay rebuild for 300ms
			ignoreInitial: true // Optional: Avoid initial rebuild
		}
	})
  ]
};

For the people using webpack encore with Symfony, it is exactly the same, with some adjustements:

Encore

// Other configs....
    .configureDevServerOptions((options) => {
        options.liveReload = true;
        options.static = {
            watch: false,
        };
        options.watchFiles = {
            paths: ["src/**/*.php", "templates/**/*"],
        };
    })
	.addPlugin(new WatchFilesPlugin({
		files: ['src/**/*.php', 'templates/**/*'],
		options: {
			aggregateTimeout: 300, // Optional: Delay rebuild for 300ms
			ignoreInitial: true // Optional: Avoid initial rebuild
		}
	}));