如何將我的 Webpack/Vue 代碼拆分為單獨的 vendor.js 文件並將其從 app.js 中刪除？

Question

我想為我的項目創建vendor.js和app.js文件，其中vendor.js文件包含 Webpack 和 Vue.js 核心代碼，而app.js僅包含為我的應用程序編寫的 Vue.js 代碼。 我正在使用laravel-mix npm 模塊來包裝 Webpack 並構建我的所有資產。

vendor.js包含以下一行代碼：

window.Vue = require('vue');

app.js包含以下代碼：

import App from './App.vue';

Vue.component('App', App);

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

而webpack.mix.js包含以下代碼：

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正是我想要的，只是 Webpack 和 Vue.js 核心代碼，但是， app.js還包含 Webpack 核心代碼。 我在我的應用程序中在app.js之前加載vendor.js ，所以我不需要兩個文件中的 Webpack 核心代碼。

如何構建vendor.js和app.js文件以獲得我想要的？ 此外，我在vendor.js的代碼似乎有點草率（即，我使用的是require而不是import並且我將它附加到window對象，以便app.js文件可以訪問Vue對象），我想知道是否有更好的方法來做到這一點。 我理想中喜歡的是以下內容：

vendor.js ：

import Vue from 'vue';

app.js ：

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 核心代碼？

嗯，我有點知道答案，但我希望它足夠聰明，只包含一次核心代碼。 那可能嗎？

Answer 1

使用供應商提取將幫助您 + 為您提供一個單獨的 Webpack 運行時塊，您嘗試過嗎？ laravel.com/docs/5.7/mix#vendor-extraction

PS，除非我誤解了您所說的 Webpack 代碼的意思，否則您的意思是運行時對嗎？