5

Using Laravel Mix, is it possible to watch two Webpack config files with one command so that changes to any of the underlying files instantly cause the necessary files to be compiled?

Specifically, I have the following two Webpack config files I'm using with Laravel Mix: webpack.css.mix.js and webpack.js.mix.js

I then have the following commands in the scripts object of package.json:

"development-css": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --watch --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --env.mixfile=webpack.css.mix",
"development-js": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --watch --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --env.mixfile=webpack.js.mix",
"watch": "npm run development-css -- --watch & npm run development-js -- --watch",

The npm run watch command only watches the first command specified though. In the above case, any changes I save to the Sass files will build, but no changes to any JS/Vue files. If I switch the two commands in the watch command, then the JS will build on change/save, but not the Sass.

Does anyone have any ideas how to structure the npm run watch command (or the underlying commands), so that I can watch both the Sass and JS at the same time?

Also, for what it's worth, due to a bug in Laravel Mix at the moment, I had to separate the Sass and JS compilation into two separate files. This bug is documented here: https://github.com/JeffreyWay/laravel-mix/issues/1914

The discussion does solve the bug, but not how to combine the two commands into one watch command. Thank you.

HartleySan
  • 7,404
  • 14
  • 66
  • 119
  • I want to do the same, because tailwindcss is so slowww to build. Have you tried 2 separate commands? e.g. `npm run watchjs` and in a separate terminal `npm run watchsass`? if that works, you can write a little shell / bash script, that executes one after the other – Toskan Jul 17 '20 at 02:10
  • I actually commented on the actual issue in GitHub, and the following comment was something that worked for me: https://github.com/JeffreyWay/laravel-mix/issues/1914#issuecomment-642218920 – HartleySan Jul 17 '20 at 11:58

1 Answers1

3

UPDATE: related, not exactly to the question, but related to the concern (having multiple mix builds) there is actually a github project that tackles a similar issue:

https://github.com/omnichronous/multimix

doesn't answer afaik, to build both at the same time. Haven't tried, leaving here in case someone is interested

OLD answer

answering on behalf of @HartleySan

@rmondesilva was suggesting that without concurrently one of the two commands is not working. I installed it without trying other solutions and it has worked.

npm install concurrently --save-dev

I'm using two config files (webpack.mix.js and webpack.mix.css.js), and this is the relevant part of my package.json:

"scripts": {
  "css-dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --env.mixfile=webpack.mix.css --config=node_modules/laravel-mix/setup/webpack.config.js",
  "js-dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
  "development": "concurrently \"npm run css-dev\" \"npm run js-dev\"",
  "css-watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --watch --hide-modules --env.mixfile=webpack.mix.css --config=node_modules/laravel-mix/setup/webpack.config.js",
  "js-watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --watch --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
  "watch": "concurrently \"npm run css-watch\" \"npm run js-watch\"",
  "watch-poll": "npm run watch -- --watch-poll",
  "css-production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --env.mixfile=webpack.mix.css --config=node_modules/laravel-mix/setup/webpack.config.js",
  "js-production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
  "production": "concurrently \"npm run css-production\" \"npm run js-production\"",
  "dev": "npm run development",
  "prod": "npm run production"
}

Last two ones are obviously just aliases, and I don't believe I have ever used watch-poll.

(I'm also using mergeManifest() in the two webpack.mix configuration files).

from https://github.com/JeffreyWay/laravel-mix/issues/1914#issuecomment-642218920

SuperDJ
  • 7,488
  • 11
  • 40
  • 74
Toskan
  • 13,911
  • 14
  • 95
  • 185