webpackwatchlaravel-mixnpm-run

Is there a way to watch two Laravel Mix Webpack config files at the same time for any changes?

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.

Solution

  • 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