配置Laravel Mix：仅在对应Vue组件变更时构建指定Vue应用

问题场景 #

我的Laravel项目包含两个独立的Vue.js应用，目录结构如下：

├── public
│   ├── js
│   │   ├── app_the_first.js
│   │   ├── app_the_second.js
├── resources
│   ├── assets
│   │   ├── js
│   │   │   ├── the_first_components
│   │   │   │   ├── // Vue组件文件
│   │   │   ├── the_second_components
│   │   │   │   ├── // Vue组件文件
│   │   │   ├── app_the_first.js
│   │   │   ├── app_the_second.js
│   │   ├── sass
│   │   │   ├── app_the_first.scss
│   │   │   ├── app_the_second.scss
├── views
│   ├── the_first.blade.php
│   ├── the_second.blade.php
├── package.json
├── webpack.mix.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');

修改the_first_components下的组件后，执行npm run dev或npm run prod时，两个应用的JS文件都会被重新构建，我希望只构建app_the_first.js对应的项目。

解决方案 #

方法1：使用Laravel Mix的--only参数 #

Laravel Mix支持通过--only参数指定要构建的入口文件，直接在命令行执行：

# 仅构建第一个应用的JS和关联的SCSS
npm run dev -- --only=resources/assets/js/app_the_first.js

如果需要单独指定SCSS文件，也可以同时传入：

npm run dev -- --only=resources/assets/js/app_the_first.js,resources/assets/sass/app_the_first.scss

方法2：拆分Webpack配置文件 #

创建多个独立的配置文件，分别对应不同的应用：

• 新建webpack.mix.first.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');

• 新建webpack.mix.second.js，仅包含第二个应用的配置：

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

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

然后在package.json的scripts字段中添加对应命令：

{
  "scripts": {
    "dev:first": "mix --mix-config=webpack.mix.first.js",
    "prod:first": "mix --mix-config=webpack.mix.first.js --production",
    "dev:second": "mix --mix-config=webpack.mix.second.js",
    "prod:second": "mix --mix-config=webpack.mix.second.js --production",
    "dev": "mix",
    "prod": "mix --production"
  }
}

之后构建第一个应用只需执行：

npm run dev:first
# 生产环境构建
npm run prod:first

方法3：用环境变量控制构建项 #

在webpack.mix.js中通过环境变量判断要构建的应用：

const mix = require('laravel-mix');
const targetApp = process.env.TARGET_APP;

// 未指定目标时构建全部，指定则仅构建对应项
if (!targetApp || targetApp === 'first') {
    mix.js('resources/assets/js/app_the_first.js', 'public/js').vue()
       .sass('resources/assets/sass/app_the_first.scss', 'public/css');
}

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

执行命令时通过环境变量指定目标应用：

# 仅构建第一个应用
TARGET_APP=first npm run dev
# 仅构建第二个应用
TARGET_APP=second npm run prod
# 不指定则构建全部
npm run dev

内容的提问来源于stack exchange，提问作者TamYen