有没有办法同时观察两个Laravel Mix Webpack配置文件的任何更改?

Question

使用 Laravel Mix，是否可以用一个命令监视两个 Webpack 配置文件，以便对任何底层文件的更改立即导致编译必要的文件？

具体来说，我有以下两个与Laravel Mix一起使用的Webpack配置文件：webpack.css.mix.js和webpack.js.mix.js

然后，我在package.json的scripts对象中具有以下命令：

"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",

npm run watch命令仅监视指定的第一个命令。在上述情况下，我保存到 Sass 文件的任何更改都将构建，但不会对任何 JS/Vue 文件进行任何更改。如果我在watch命令中切换两个命令，那么 JS 将在更改/保存的基础上构建，而不是 Sass。

有没有人知道如何构建npm run watch命令(或底层命令(，以便我可以同时观看 Sass 和 JS？

另外，为了它的价值，由于目前Laravel Mix中的一个错误，我不得不将Sass和JS编译分成两个单独的文件。此错误记录在此处：https://github.com/JeffreyWay/laravel-mix/issues/1914

讨论确实解决了错误，但没有解决如何将两个命令合并为一个监视命令。谢谢。

Answer 1

更新： 相关，不完全与问题有关，但与关注点相关(具有多个混合构建( 实际上有一个 GitHub 项目解决了类似的问题：

https://github.com/omnichronous/multimix

不回答 AFAIK，同时构建两者。没试过，留在这里以防有人感兴趣

旧答案

代表@HartleySan回答

@rmondesilva建议，如果没有同时使用，两个命令中的一个不起作用。我在没有尝试其他解决方案的情况下安装了它，并且它已经奏效了。

npm install concurrently --save-dev

我正在使用两个配置文件(webpack.mix.js和webpack.mix.css.js(，这是我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"
}

最后两个显然只是别名，我不相信我曾经使用过watch-poll.

(我也在两个webpack.mix配置文件中使用mergeManifest()(。

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