Laravel: Up & Running, 2nd Edition

Chapter 6. Frontend Components

Laravel is primarily a PHP framework, but it also has a series of components focused on generating frontend code. Some of these, like pagination and message bags, are PHP helpers that target the frontend, but Laravel also provides a Webpack-based build system called Mix and some conventions around non-PHP assets.

Laravel’s Build Tools Before and After Laravel 5.4

Prior to Laravel 5.4, Laravel’s frontend build tool was named Elixer, and it was based on Gulp. In 5.4 and later, the new build tool is named Mix, and it’s based on Webpack.

Since Mix is at the core of the non-PHP frontend components, let’s start there.

Laravel Mix

Mix is a build tool that provides a simple user interface and a series of conventions on top of Webpack. Mix’s core value proposition is simplifying the most common build and compilation Webpack tasks by means of a cleaner API and a series of naming and application structure conventions.

A Quick Introduction to Webpack

Webpack is a JavaScript tool designed for compiling static assets; the Webpack team describes its purpose as bundling “modules with dependencies” together and producing “static assets.”

Webpack is similar to Gulp or Grunt in that, like Webpack, those tools are often used for processing and bundling dependencies for websites. This will commonly include running a CSS preprocessor like Sass or Less or PostCSS, copying files, and concatenating and minifying JavaScript.

Unlike the others, Webpack is specifically