执行npm run prod时触发webpack-cli错误：需编译JS提取vendor代码

环境信息 #

• Ubuntu 20.04 LTS
• node v14.15.5
• npm v6.14.11
• php v7.4.3
• composer 2.4.4
• Laravel 6.18.15

错误日志 #

执行npm run prod时触发的错误：

bone@bone:/home/webb/fishy$ npm run prod

> @ prod /home/webb/fishy
> npm run production


> @ production /home/webb/fishy
> mix --production

[webpack-cli] Error: You must compile JS to extract vendor code
    at Extract.webpackEntry (/home/webb/fishy/node_modules/laravel-mix/src/components/Extract.js:46:19)
    at /home/webb/fishy/node_modules/laravel-mix/src/components/ComponentRegistrar.js:112:53
    at /home/webb/fishy/node_modules/laravel-mix/src/Dispatcher.js:39:62
    at Array.map (<anonymous>)
    at Dispatcher.fire (/home/webb/fishy/node_modules/laravel-mix/src/Dispatcher.js:39:47)
    at Mix.dispatch (/home/webb/fishy/node_modules/laravel-mix/src/Mix.js:248:32)
    at WebpackConfig.buildEntry (/home/webb/fishy/node_modules/laravel-mix/src/builder/WebpackConfig.js:62:24)
    at WebpackConfig.build (/home/webb/fishy/node_modules/laravel-mix/src/builder/WebpackConfig.js:27:20)
    at Mix.build (/home/webb/fishy/node_modules/laravel-mix/src/Mix.js:89:35)
    at module.exports (/home/webb/fishy/node_modules/laravel-mix/setup/webpack.config.js:16:16)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ production: `mix --production`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the @ production script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/free/.npm/_logs/2022-12-14T13_08_33_629Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ prod: `npm run production`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the @ prod script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/free/.npm/_logs/2022-12-14T13_08_33_652Z-debug.log

错误原因 #

这个错误的核心原因是：你的Laravel Mix配置文件中调用了extract()方法（用于提取第三方依赖的vendor代码），但没有先配置任何JavaScript编译任务。Laravel Mix要求必须先指定要编译的JS入口文件，才能执行代码提取操作。

解决步骤 #

1. 打开项目根目录下的webpack.mix.js文件
2. 调整配置顺序，确保先声明JS编译任务，再调用extract()：

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

// 第一步：指定要编译的JS入口文件
mix.js('resources/js/app.js', 'public/js')
   // 第二步：提取指定的第三方依赖包到vendor文件中
   .extract(['vue', 'axios']); // 替换成你项目中实际使用的依赖包名

3. 如果你不需要提取vendor代码，直接删除extract()相关的配置行即可
4. 保存配置文件后，重新执行npm run prod

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