如何将我的 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'
});

对我来说这似乎 "cleaner" 并且更符合 ES6 的做事方式，但它有点违背 vendor.js 的目的，因为 app.js 包含相同的导入Vue.js。我认为 Webpack 应该 "smart" 足以知道我已经将 Vue.js 导入到 vendor.js 文件中，这样当我再次将它导入 app.js 时，就不需要了将所有 Vue.js 核心代码重新带过来。另外，为什么它在两个文件中都添加了所有的 Webpack 核心代码？

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

Answer 1

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

P.S。除非我误解了你所说的 Webpack 代码的意思，否则你指的是运行时吧？

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

How do I split my Webpack/Vue code into a separate vendor.js file and remove it from app.js?

javascript

vendor

webpack

vue.js

laravel-mix