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 <script src="{{ asset('js/app.js') }}"></script> which includes the script you've created. — mankowitz
– mankowitz, Commented May 17, 2020 at 5: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
– Kapil Dev, Commented May 17, 2020 at 6:01

save0r · Accepted Answer · 2021-03-15 10:55:54Z

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, 2021 at 10:55

answered May 17, 2020 at 6:36

save0r

461 silver badge5 bronze badges

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

6 Comments

Kapil Dev Over a year ago

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.

save0r Over a year ago

try take out '[' and ']' and put the .js views at separated mix.js class.

save0r Over a year ago

i'ts exactly as "//sucessful" it

Kapil Dev Over a year ago

new editied answer creating two js files in public/js folder then what is advantage of webpack.mix .

save0r Over a year ago

compile the files to a certain directory with their appropriate libraries. This is just an syntax issue

|

Emma Marcier · Accepted Answer · 2020-11-24 01:22:25Z

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, 2020 at 1:22

Emma Marcier

27.8k12 gold badges49 silver badges71 bronze badges

answered Nov 23, 2020 at 19:57

Dávid Siklaky

1

Collectives™ on Stack Overflow

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

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related