JS 文件未加载使用 Webpack、Laravel 混合 Laravel 8

Question

I'm new to Laravel and I'm trying to compile and upload my resources using 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')

These resources compiled successfully; in my users.js file, I have a JS script function that alerts some text on button click. In my Blade layout, I'm importing files like the following.

<!-- 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">

I understand that Mix compiles the resources and puts them in the public directory so the browser can read them. But when I inspect my loaded files in the browser, the users.js is not among them. I've changed the order in which the files are loaded, but it didn't work. What I noticed is that in my Blade layout, I'm placing them in an HTML head tag. So I changed the position of the script file to before the body close tag position. However, when I inspect my loaded files on the browsers, the app.js file has existed, but the HTML head tag and users.js are not there.

Am I doing anything wrong here? And please, what's the proper way to get this done?

Answer 1

I've found what solved my issue, and the answer as follow: Use scripts() method to minify any number of JavaScript files on webpack.mix.js file like this

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

this is a proper way to compile your JS asset.