webpack 配置laravel mix以在组件文件更改时构建特定的vue应用程序

ymzxtsji  于 2023-11-19  发布在  Webpack
关注(0)|答案(1)|浏览(178)

我的Laravel项目,包含多个Vue.js应用。项目目录结构如下:

  1. ├── public
  2. ├── js
  3. ├── app_the_first.js
  4. ├── app_the_second.js
  5. ├── resources
  6. ├── assets
  7. ├── js
  8. ├── the_first_components
  9. ├── // Vue component files
  10. ├── the_second_components
  11. ├── // Vue component files
  12. ├── app_the_first.js
  13. ├── app_the_second.js
  14. ├── sass
  15. ├── app_the_first.js
  16. ├── app_the_second.js
  17. ├── views
  18. ├── the_first.blade.php
  19. ├── the_second.blade.php
  20. ├── package.json
  21. ├── webpack.mix.js

字符串
当我更改the_first_component并运行npm run dev/prod时,app_the_first.jsapp_the_second.js都将重新生成
我的webpack.mix.js

  1. const mix = require('laravel-mix');
  2. mix.js('resources/assets/js/app_the_first.js', 'public/js').vue()
  3. .sass('resources/assets/sass/app_the_first.scss', 'public/css');
  4. mix.js('resources/assets/js/app_the_second.js', 'public/js').vue()
  5. .sass('resources/assets/sass/app_the_second.scss', 'public/css');


我只想重建app_the_first.js,不想重建app_the_second.js

snz8szmq

snz8szmq1#

Laravel Mix本身不支持构建选定的资产,因为运行npm run dev或npm run prod将触发webpack.mix.js中定义的所有任务。您可以定义一个环境变量来指定您想要构建的应用:

  1. const mix = require('laravel-mix');
  2. const appName = process.env.APP_NAME;
  3. if (!appName || appName === 'the_first') {
  4. mix.js('resources/assets/js/app_the_first.js', 'public/js').vue()
  5. .sass('resources/assets/sass/app_the_first.scss', 'public/css');
  6. }
  7. if (!appName || appName === 'the_second') {
  8. mix.js('resources/assets/js/app_the_second.js', 'public/js').vue()
  9. .sass('resources/assets/sass/app_the_second.scss', 'public/css');
  10. }

字符串
然后,您可以在运行npm脚本时使用环境变量来指定要编译的应用程序:

  1. APP_NAME=the_first npm run dev
  2. APP_NAME=the_second npm run dev
  3. npm run dev


修改你的package.json脚本以包含这些新命令:

  1. "scripts": {
  2. "dev": "npm run development",
  3. "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
  4. "watch": "npm run development -- --watch",
  5. "watch-poll": "npm run watch -- --watch-poll",
  6. "hot": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
  7. "prod": "npm run production",
  8. "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js",
  9. "dev-first": "cross-env APP_NAME=the_first npm run dev",
  10. "prod-first": "cross-env APP_NAME=the_first npm run production",
  11. "dev-second": "cross-env APP_NAME=the_second npm run dev",
  12. "prod-second": "cross-env APP_NAME=the_second npm run production"
  13. },


现在,您可以使用npm run dev-first仅编译第一个应用程序的资产,而npm run dev-second用于第二个应用程序。
如果你没有安装cross-env,你可以使用以下命令安装:

  1. npm install --save-dev cross-env

展开查看全部

相关问题