How to use multiple js using Webpack.mix.js in Laravel 7?

Question

I my project I am using Bootstrap.js, Jquery.js , Jquery_validation.js and one custom.js(for project specific rules).

I want to use only one app.js on all pages. what is the best way to use webpack.mix ?

I have installed jquery and jquery-validation , Please suggest me.

package.json

"devDependencies": {
    "axios": "^0.19",
    "bootstrap": "^4.0.0",
    "cross-env": "^7.0",
    "jquery": "^3.2",
    "laravel-mix": "^5.0.1",
    "lodash": "^4.17.13",
    "popper.js": "^1.12",
    "resolve-url-loader": "^2.3.1",
    "sass": "^1.20.1",
    "sass-loader": "^8.0.0",
    "vue": "^2.5.17",
    "vue-template-compiler": "^2.6.10"
},
"dependencies": {
    "jquery-validation": "^1.19.1",
    "savvy-js": "^1.0.7"
}

in resource/js/app.js

require('jquery-validation');

require('./bootstrap');

window.Vue = require('vue');

webpack.mix

mix.js(['resources/js/app.js','resources/js/snavvy.js'], 'public/js')

.sass('resources/sass/app.scss', 'public/css') .options({ processCssUrls: false });

So Please tell me how to use bootstrap.js, jquery.js, jquery-validation.js and custom.js(resource/js/custom.js) in best way ?

This is a pretty standard laravel setup. In your `app.blade.php`, you should have `` which includes the script you've created. — mankowitz, May 17 '20 at 05:47
Yes, I am using it but I have multiple js (bootstrap,jquery,jquery_validation & one custom js) so need to combine them. — Kapil Dev, May 17 '20 at 06:01

save0r · Answer 1 · 2021-03-15T10:55:54.803

2

The webpack.mix.js need the file extensions; the folder is not enough. I usually link the .sass to my view. Something like


//does not work
mix.js(['resources/js/app.js','resources/js/snavvy.js'], 'public/js');


//sucessful
mix.js('resources/js/app.js','public/js');

//or if you want a custom name
mix.js('resources/js/snavvy.js', 'public/js/custom_snavvy.js');

npm run dev

//or

npm run watch

Good luck.

edited Mar 15 '21 at 10:55

answered May 17 '20 at 06:36

save0r

46
1
5

I added file name with extention. mix.js(['resources/js/app.js','resources/js/snavvy.js'], 'public/js/app.js'), but still snavvy is not working. – Kapil Dev May 17 '20 at 06:53
try take out '[' and ']' and put the .js views at separated mix.js class. – save0r May 17 '20 at 06:59
i'ts exactly as "//sucessful" it – save0r May 17 '20 at 07:20
new editied answer creating two js files in public/js folder then what is advantage of webpack.mix . – Kapil Dev May 17 '20 at 07:22
compile the files to a certain directory with their appropriate libraries. This is just an syntax issue – save0r May 17 '20 at 07:25
The main libraries are in node_modules that it's not safe to be available to the user – save0r May 17 '20 at 07:27

score 0 · Answer 2 · edited Nov 24 '20 at 01:22

0

This solution worked for me:

mix.js([
    'resources/js/app.js',
    'resources/js/jquery-2.2.4.min.js',
    'resources/plugins/bootstrap-3.3.6/js/bootstrap.min.js',
     ...
], 'public/js/app.js').version();

Further Details

edited Nov 24 '20 at 01:22

Emma

27,428
11
44
69

answered Nov 23 '20 at 19:57

Dávid Siklaky

1

How to use multiple js using Webpack.mix.js in Laravel 7?

2 Answers2