Laravel Mix：提取非npm的第三方依赖文件

嘿，我懂你想实现的需求——把项目里自己存放的第三方依赖（不是通过npm安装的，比如你放在resources/assets/vendor里的redactor），和jQuery一起用Mix的extract功能抽离到公共的vendor文件里对吧？你之前直接把本地文件路径丢进extract数组的做法肯定行不通，因为extract是用来识别npm包名称的，不是本地文件路径。

下面给你一步步的解决方案：

步骤1：配置Webpack别名 #

首先，我们需要给本地的第三方文件起一个“模块名”，让Webpack能识别它。在webpack.mix.js里添加Webpack配置，引入path模块并设置别名：

const mix = require('laravel-mix');
const path = require('path'); // 别忘了引入path模块

// 配置Webpack别名
mix.webpackConfig({
    resolve: {
        alias: {
            'redactor': path.resolve(__dirname, 'resources/assets/vendor/redactor/redactor.min.js')
        }
    }
});

步骤2：在入口文件中导入依赖 #

接下来，在你的resources/assets/js/app.js里，用刚才定义的别名导入redactor：

// 先确保jQuery已导入并挂载到window（如果redactor是jQuery插件的话）
import $ from 'jquery';
window.$ = $;
window.jQuery = $;

// 用别名导入本地的redactor
import 'redactor';

步骤3：使用extract抽离依赖 #

现在就可以在extract里使用我们定义的别名redactor了，和jQuery一起抽离：

mix.js('resources/assets/js/app.js', 'public/js')
   .extract(['jquery', 'redactor']);

这样运行npm run dev或者npm run prod之后，Mix就会把jQuery和你的本地redactor文件一起打包到public/js/vendor.js里，完美实现你想要的效果！

为什么原来的代码不行？ #

简单来说，extract方法的参数是模块标识符，Webpack只会去node_modules里找对应的包；而你直接写本地文件路径，Webpack无法把它识别为一个可被抽离的模块，自然就会报错或者不生效。通过配置别名，我们把本地文件伪装成了一个“虚拟模块”，让Webpack能正确处理它。

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