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

ymzxtsji  于 11个月前  发布在  Webpack
关注(0)|答案(1)|浏览(124)

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

├── public
│   ├── js
│   │   ├── app_the_first.js
│   │   ├── app_the_second.js
├── resources
│   ├── assets
│   │   ├── js
│   │   │   ├── the_first_components
│   │   │   │   ├── // Vue component files
│   │   │   ├── the_second_components
│   │   │   │   ├── // Vue component files
│   │   │   ├── app_the_first.js
│   │   │   ├── app_the_second.js
│   ├── sass
│   │   ├── app_the_first.js
│   │   ├── app_the_second.js
├── views
│   ├── the_first.blade.php
│   ├── the_second.blade.php
├── package.json
├── webpack.mix.js

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

const mix = require('laravel-mix');

mix.js('resources/assets/js/app_the_first.js', 'public/js').vue()
   .sass('resources/assets/sass/app_the_first.scss', 'public/css');

mix.js('resources/assets/js/app_the_second.js', 'public/js').vue()
   .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中定义的所有任务。您可以定义一个环境变量来指定您想要构建的应用:

const mix = require('laravel-mix');

const appName = process.env.APP_NAME;

if (!appName || appName === 'the_first') {
    mix.js('resources/assets/js/app_the_first.js', 'public/js').vue()
       .sass('resources/assets/sass/app_the_first.scss', 'public/css');
}

if (!appName || appName === 'the_second') {
    mix.js('resources/assets/js/app_the_second.js', 'public/js').vue()
       .sass('resources/assets/sass/app_the_second.scss', 'public/css');
}

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

APP_NAME=the_first npm run dev

APP_NAME=the_second npm run dev

npm run dev


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

"scripts": {
  "dev": "npm run development",
  "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
  "watch": "npm run development -- --watch",
  "watch-poll": "npm run watch -- --watch-poll",
  "hot": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
  "prod": "npm run production",
  "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js",
  "dev-first": "cross-env APP_NAME=the_first npm run dev",
  "prod-first": "cross-env APP_NAME=the_first npm run production",
  "dev-second": "cross-env APP_NAME=the_second npm run dev",
  "prod-second": "cross-env APP_NAME=the_second npm run production"
},


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

npm install --save-dev cross-env

相关问题