Har*_*San 5 watch webpack npm-run laravel-mix
使用 Laravel Mix,是否可以使用一个命令查看两个 Webpack 配置文件,以便对任何底层文件的更改立即导致必要的文件被编译?
具体来说,我有以下两个与 Laravel Mix 一起使用的 Webpack 配置文件:webpack.css.mix.js和webpack.js.mix.js
scripts然后我在的对象中有以下命令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",
Run Code Online (Sandbox Code Playgroud)
该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
讨论确实解决了该错误,但没有解决如何将两个命令组合成一个监视命令。谢谢。
更新:相关,不完全与问题相关,但与关注点(具有多个混合构建)相关,实际上有一个 github 项目可以解决类似的问题:
https://github.com/omnichronous/multimix
没有回答afaik,同时构建两者。还没尝试过,如果有人感兴趣就离开这里
旧答案
代表@HartleySan 回答
@rmondesilva表示如果没有同时执行,这两个命令之一将无法工作。我安装了它,没有尝试其他解决方案,并且它有效。
npm install concurrently --save-dev我正在使用两个配置文件(
webpack.mix.js和webpack.mix.css.js),这是我的相关部分package.json:Run Code Online (Sandbox Code Playgroud)"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。(我也在
mergeManifest()两个webpack.mix配置文件中使用)。
来自 https://github.com/JeffreyWay/laravel-mix/issues/1914#issuecomment-642218920