ciarlill's avatar

Webpack watch directory and run artisan command

We have some legacy code that is running an artisan command to compile some blade views into angular templates. It generates the HTML from each blade file and concatenates them all together into a single ng.html file. We are moving our build process to mix/webpack to begin our front-end re-write to finally get rid of that stuff, but in the meantime we don't want to run two build processes (Gulp & webpack). What we would like to accomplish is having webpack watch all the blade templates in a directory, and if one changes, re-run the artisan command. This is very straightforward to do in Gulp, but is giving me some trouble with Webpack.

I looked at setting up a custom loader to keep track of the *.blade.php files but I don't want the command to process each file separately, I want to run the command once if any of the files change.

I came up with a combination of my own hacked together plugin, combined with the ExtraWatchWebpackPlugin, but it feels a little hack-y. I would like to find a nicer all-in-one solution if possible.

Here is a gist of my combined plugin/config: https://gist.github.com/alexciarlillo/8f301831721a3c2f773eb7b42a2c93e7

(I hacked this together from the examples in the Webpack docs and looking at a couple other plugins)

This works... I just would like to see if there is a better option. It is only going to be temporary until we finish our re-write, but it still seems a little brittle. I am wondering if this solution could be cleaned-up, generalized, and expanded on and be of use to the community. (Even though it is a rather odd use-case).

We also have a similar process for our language files, but a loader might be more appropriate for that eventually.

0 likes
0 replies

Please or to participate in this conversation.