Understanding Laravel Mix

Question

Understanding Laravel Mix

I am currently in the process of migrating one of my websites to Laravel in order to make it a little more maintainable in future... I have plenty of experience building API's with Laravel but I have very limited experience building websites with Laravel and resultantly I am in need of a little bit of guidance from another pro.

In short, I would very much appreciate answers to the following very simple questions if anyone can spare me a couple of mins...

File based JS & CSS instead of App based

I like to write my JS and CSS files in a particular way where each page has their own specific files relevant to the page. For example, about.php might have the following dependencies:

JS:

• jquery.js
• any_other_third_party_library.js
• app.js (global functions)
• about.js (page specific functions)

CSS:

• some_third_party_library.css
• app.css (global styles)
• about.css (page specific styles)

On my own framework, the above would be combined and minified into one file for JS and one file for CSS. From what I understand, Laravel Mix does exactly this...

However, as far as I can see, the way to do this would be as follows:

webpack.mix.js:

// About
mix.scripts([
    'resources/assets/js/app.js',
    'resources/assets/js/about/about.js'
], 'public/js/about/about.js');

Very simply, what I would like to know; is the above the correct way to go about this? Is there a better, more efficient, way to automate this for each page?

What are the bootstrap.js and app.js files?

From what I can see, these files just load dependencies but this is a little confusing as some dependencies might be page specific... Please can someone explain in a little further detail what these files are for? Or at least, what the difference is between them...

Getting rid of Vue

I have no interest in using Vue in my project so I have deleted the following files:

/components/Example.vue

and the Vue code in app.js

Does this matter in any way?

Answer 1

You'll bundle up all your styles and scripts a single file each and serve them to the client minified.

For front end assets, call mix.sass('resources/assets/sass/app.scss'). In that entry point to your styles you will be able to import your other stylesheets as you need using Sass's @import 'about'; syntax. (Rename your other CSS files to end in .scss too).

For your back end assets, call mix.js('resources/assets/js/app.js'). Then, similarly you can import other JavaScript modules using import './about.js';. You may want to look up ES2015 modules so you can learn how to write modular JavaScript.

Read through the bootstrap.js file to see how Laravel hooks up jQuery and Vue by default. You don't need any of this, so remove whatever you don't want or delete the entire file if you don't need any of it.

Vue comes out of the box with Laravel but it's just a suggestion, you can replace it with your own front end framework of choice or rip it out and replace it with nothing. Up to you.

Edit: Long story short; use mix.sass and mix.js, read up on using Sass and ES2015 modules to write awesome code.