JS files not loading using Webpack, Laravel Mix in 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?

UPDATE - I even created new js at public directory without referencing it at my resources and It's not Uploaded among the files — HAMMASI
– HAMMASI, Commented Jun 8, 2021 at 4:11
I'm sorry for the grammatical or mistyped errors , please understand English is not my native language . I would highly appreciate any help . I'm still stuck on this matter . — HAMMASI
– HAMMASI, Commented Jun 9, 2021 at 0:48

HAMMASI · Accepted Answer · 2021-06-09 06:02:05Z

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 .

answered Jun 9, 2021 at 6:02

HAMMASI

331 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JS files not loading using Webpack, Laravel Mix in Laravel 8

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related