Javascript 如何将我的Webpack/Vue代码拆分为一个单独的vendor.js文件，并将其从app.js中删除？

我想为我的项目创建

vendor.js

和

app.js

文件，其中

vendor.js

文件包含Webpack和Vue.js核心代码，

app.js

仅包含为我的应用程序编写的Vue.js代码。我正在使用

laravelmix

npm模块来包装网页并构建我的所有资产

vendor.js

包含以下一行代码：

window.Vue = require('vue');

app.js

包含以下代码：

import App from './App.vue';

Vue.component('App', App);

new Vue({
    el: 'App'
});

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

mix.js('src/js/vendor.js', 'public/js/')
   .js('src/js/app.js', 'public/js/')
   .sass('src/sass/vendor.scss', 'public/css/')
   .sass('src/sass/app.scss', 'public/css/');

和

webpack.mix.js

包含以下代码：

import App from './App.vue';

Vue.component('App', App);

new Vue({
    el: 'App'
});

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

mix.js('src/js/vendor.js', 'public/js/')
   .js('src/js/app.js', 'public/js/')
   .sass('src/sass/vendor.scss', 'public/css/')
   .sass('src/sass/app.scss', 'public/css/');

当我这样做时，

vendor.js

正是我想要的，只是网页包和Vue.js核心代码，然而，

app.js

也包含网页包核心代码。我正在我的应用程序中加载

vendor.js

之前的

app.js

，所以我不需要两个文件中的Webpack核心代码

如何构造

vendor.js

和

app.js

文件以获得所需的内容？另外，我在

vendor.js

中的代码似乎有点草率（即，我使用

require

而不是

import

，并将其附加到

窗口

对象，以便

app.js

文件可以访问

Vue

对象），我想知道是否有更好的方法。理想情况下，我希望如下所示：

vendor.js

：

import Vue from 'vue';

import Vue from 'vue';
import App from './App.vue';

Vue.component('App', App);

new Vue({
    el: 'App'
});

app.js

：

import Vue from 'vue';

import Vue from 'vue';
import App from './App.vue';

Vue.component('App', App);

new Vue({
    el: 'App'
});

对我来说，这似乎“更干净”，更符合ES6的工作方式，但它有点违背了

vendor.js

的目的，因为

app.js

包含相同的Vue.js导入。我认为Webpack应该足够“聪明”，可以知道我已经将Vue.js导入了

vendor.js

文件，这样当我再次将它导入

app.js

时，就不需要重新导入所有Vue.js核心代码了。另外，为什么要在这两个文件中添加所有的网页核心代码

---

我知道答案，但我希望它足够聪明，只包含一次核心代码。这有可能吗？

使用供应商抽取将帮助您为Webpack运行时获取一个单独的块。您尝试过吗？laravel.com/docs/5.7/mix#供应商提取

---

另外，除非我误解了您所说的网页包代码，否则您指的是运行时，对吗？

不太熟悉laravel mix，但不确定为

节点模块指定源文件而不是regex是否可以完成这项工作。根据这一点，使用供应商提取将有助于您为webpack运行时获取一个单独的块。您尝试过吗？这正是我想要的。唯一的负面影响是它将网页包代码添加到了
vendor.js
和
app.js
，但我想这不是一个简单的方法，所以很酷。这仍然是一个巨大的收获。谢谢。如果你想把你的评论作为答案，我会把它标记为正确的。谢谢。是的，我使用了
extract
Mix函数，正如文档中所引用的那样，它实现了我想要的功能。非常感谢。