时间戳

首页 > 解决方案 > JS文件未使用Webpack加载，Laravel 8中的Laravel Mix

javascript - JS文件未使用Webpack加载，Laravel 8中的Laravel Mix

问题描述

我是 Laravel 的新手，我正在尝试使用 Laravel Mix 编译和上传我的资源。

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

这些资源编译成功；在我的 users.js 文件中，我有一个 JS 脚本函数，它会在按钮单击时提醒一些文本。在我的 Blade 布局中，我正在导入如下文件。

<!-- Scripts -->
<script src="{{ mix('js/users.js') }}"></script>
<!-- <script src="{{mix('/js/NotResourced.js')}}"></script> -->
<script src="{{ mix('js/app.js') }}"></script>

<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/myStyle.css') }}" rel="stylesheet">

我知道 Mix 会编译资源并将它们放在公共目录中，以便浏览器可以读取它们。但是当我在浏览器中检查我加载的文件时，users.js 不在其中。我更改了加载文件的顺序，但它不起作用。我注意到，在我的 Blade 布局中，我将它们放在 HTML 头标签中。所以我把脚本文件的位置改到body close tag位置之前。但是，当我在浏览器上检查加载的文件时，app.js 文件已经存在，但 HTML 头标签和 users.js 不存在。

我在这里做错什么了吗？请问，完成这项工作的正确方法是什么？

标签： javascriptlaravelwebpacklaravel-8laravel-mix

解决方案

我找到了解决我的问题的方法，答案如下：使用 scripts() 方法来缩小 webpack.mix.js 文件中任意数量的 JavaScript 文件，如下所示

mix.scripts([
'public/js/admin.js',
'public/js/dashboard.js'
 ], 'public/js/all.js');

这是编译 JS 资产的正确方法。

推荐阅读