Introduction to Laravel Mix

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 The vue code in app.js

Does this matter in any way?

via Ben Carey