有没有办法同时观看两个 Laravel Mix Webpack 配置文件的任何更改? [英] Is there a way to watch two Laravel Mix Webpack config files at the same time for any changes?

问题描述

使用 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/问题/1914

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

解决方案

UPDATE2:这里有一个要点:https://gist.github.com/Jossnaz/7cf182e794e515d075815fcf7855c

基本上为js文件运行yarn hot，为tailwind文件运行yarn watch.似乎有效

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

https://github.com/omnicronous/multimix

不回答 afaik，同时构建两者.没试过，有兴趣的就离开这里

旧答案

代表@HartleySan 回答

<块引用>

@rmondesilva 建议没有同时 两个命令之一不起作用.我在没有尝试其他解决方案的情况下安装了它，并且成功了.

同时安装npm --save-dev

我使用了两个配置文件(webpack.mix.js 和 webpack.mix.css.js)，这是我的 的相关部分>package.json:

脚本":{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",开发":同时\"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":并发\"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",生产":同时\"npm run css-production\"\"npm run js-production\"",dev":npm 运行开发"，prod":npm 运行生产"；}

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

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

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

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.

解决方案

UPDATE2: there is a gist here: https://gist.github.com/Jossnaz/7cf182e794e515d068159ad71fcf7855

basically running yarn hot for the js files, and yarn watch for the tailwind files. seems to work

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

这篇关于有没有办法同时观看两个 Laravel Mix Webpack 配置文件的任何更改?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！