Question

在Laravel项目中，我的webpack.mix.js和resources / js / app.js设置都差不多。

webpack.mix.js：

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

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

resources / js / app.js：

require('./bootstrap');

window.Vue = require('vue');

Vue.component('profile', require('./components/profile/Profile.vue').default);

const app = new Vue({
    el: '#app'
});

但是，如果我在webpack.mix.js中使用.extract()至最后，则一切都可以成功编译，但是Vue根本不会在浏览器中加载。删除.extract()，一切都会恢复。我在做什么错了？

Answer 1

mix.extract()（不带参数）将通常的app.js分为三个文件

应用代码：app.js
供应商库：vendor.js
清单（Webpack运行时）：manifest.js

因此，您还必须在Blade视图中包括其他脚本才能加载Vue

<!-- Scripts -->
<script src="{{ mix('js/manifest.js') }}" defer></script>
<script src="{{ mix('js/vendor.js') }}" defer></script>
<script src="{{ mix('js/app.js') }}" defer></script>

顺序有点重要，因为Vue实例是在app.js中创建和挂载的，而库本身在vendor.js中，而manifest.js是webpack运行时

从docs

如果您没有为提取方法提供npm库的数组，则Mix将从node_modules目录中提取所有导入的库。这是一个有用的默认值，可能是您想要的。但是，如果需要明确说明，则传递一个数组，然后将仅提取那些供应商库。

那是清单文件？

Webpack会以少量的运行时代码进行编译，以协助完成其工作。

不使用mix.extract()时，此代码对您不可见，位于您的捆绑文件中。

但是，如果我们想拆分代码并允许长期缓存，则该运行时代码需要驻留在某个地方。因此，mix也将其提取到其自己的文件中。这样，您的供应商文件和清单文件都可以被尽可能长时间地缓存。

在Laravel Mix中使用extract（）时不加载Vue

1 个答案:

那是清单文件？