How to use Laravel Mix for custom JS/CSS

@Sinnbeck Thank you for your quick response. I did encounter that part of the documentation regarding extract which I understood as a way to extract common libraries used by some or all pages, like Vue, Jquery etc.

But with regard to custom JS and CSS I have to create complete new mix configurations like you showed in your example? But that's when you want to pipe a single resource file into a public assets file. What if I have multiple custom JS or CSS files that are all directed at one specific web page, for example dashbaord or product. How would I optimize multiple files into let's say dashboard.js or product.js? A Reddit user told me I could simple import the files into let's say resources/js/app.js using import-statements and then in my webpack.mix.js pipe that app.js file into public/js/dashboard.js or product.js.

@Toufik94 I updated my example on how it extract your own files into multiple :)

@Sinnbeck I still see the same example ever after I reloaded the page. Did something went wrong? ;p

@Toufik94 ah maybe I misunderstood. What you are after might be dynamic imports? So depending on the page it loads the app.js and a certain file more? Inertiajs uses that. This is something you set up in your js file and webpack will handle it. See the example here https://inertiajs.com/client-side-setup

@Sinnbeck This could be useful to me, but what I meant was something like this:

mix.scripts([
        "custom1.js",
        "custom2.js",
        "custom3.js"
    ], 'public/assets/js/dashboard.js');

So three custom files that are only needed for a web page that serves for example a dashboard. And then organize all these files into one single javascript file named dashboard.js.

Some other user on Reddit told me I could also do it this way:

//This could be an app.js file

import custom1 from 'custom1.js'
import custom2 from 'custom2.js'
import custom3 from 'custom3.js'

And then in mix.webpack:

mix.js('resources/js/app.js', 'public/assets/js/dashboard.js')

I don't know whether this is possible, because this code is just something I wrote quickly and was never given to me as an example.

@Toufik94 maybe you could give a code example of what you want to do? Mix is just a wrapper for webpack so anything webpack can do, so can mix

@Sinnbeck Sure, let's make things simple for example purposes. Let's say I have a web page where I want to run three Javascript plugins. So let's say the DataTables plugin which transforms ordinary HTML tables into beautiful data tables. And maybe I would also like some cool Javascripts charts on that page, so I'm also going to configure ChartsJS on that web page. And lastly, let's say I also wrote a script to add a couple of cool animations on that page.

Now, these three javascript files are only going to be used on that specific web page. I don't want them to be freely available to ALL web pages. Would I accomplish this with the approach that I sketched in my previous post? So something like:

mix.scripts([
"dataTables.js",
"charts.js",
"animations.js"
], 'public/assets/js/dashboard.js');

and then in my dashboard.blade.php file:

<script src="{{asset('js/dashboard.js')}}"></script>

@Toufik94 yup exactly. That will gather them together in one file.

As I've shown earlier. It also takes an array for multiple files

mix.js(['file.js', 'file.js'], 'dist/foo.js')
   .js('src/app2.js', 'dist/foo2.js') 

@Sinnbeck Thank you very much! That's all I wanted to know. Love the Laravel community :)

@Toufik94 check my answer. If I recall correctly, script was replaced with js in mix version 6 https://laravel-mix.com/docs/6.0/api

And happy to help

@Sinnbeck I see, thank you. In that case I will give you the best answer for this thread.