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核心代码。我在应用中的vendor.js之前加载了app.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

P.S。除非我误解了Webpack代码的含义，否则您的意思是运行时正确吗？

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

1 个答案: