3. Compiling down ressources with laravel mix - alexstojda/SOEN341 GitHub Wiki

Laravel comes with tools to manage various front-end resources you write like your css & javascript files. It's strength is that it's a one stop shop for aggregating & minifying your files for production environments.

what's webpack?

basically compiles down various js, sass, css, etc. files into fewer files as well as ensure backwards compatibility with old browsers and better performance (minify, cache, etc.)

what's laravel mix?

the easy mode for webpack that takes cake of all default behaviors as long as you specify the type, input and output.

example for laravel's default css framework -> bootstrap-sass :

by default webpack reads all sass & js files and determines all the used classes and js code then only keeps the relevant chunks in the emitted {PROJECT_PATH}/public/js/app.js;{PROJECT_PATH}/public/css/app.css files.

what's a yarn script?

well think of it as a compiler step but in reality they're more like bash scripts but written in js (horrible, I know)

Don't bother too much because we'll only ever use the default ones and you could run them directly from package.json open phpstorm.

Commands you need to know / run

you should run composer install before trying to run any of the scripts (It will install node_modules automatically aka yarn install)

In local, you only ever need to run yarn run dev when working on files in /resources. They will then be processed and thrown into /public as app.js & app.css.

Alternatively yarn run watch will basically listen for every time you save a relevant frontend file (.js .sass .less .vue .jsx .ts aka anything defined in {PROJECT_PATH}\webpack.mix.js) and run the same yarn run dev command. +1 for automation..