Webpack Guide
Most (if not all) of our themes are packed with webpack-ready sources. However, webpack builder is optional, we recommend you to use webpack instead of classic css/js sources.
It may seem a bit tricky, comparing to good-old-way method, when you include libs from CDNs and add some custom JSs & CSSs to doc's head. But, I promise, you'll fall in love with webpack-way when you get used to it ^-)
BTW, Here's a great article on Medium by Peter Jang — Modern JavaScript Explained for Dinosaurs.
Laravel Mix under the hood
For your convenience, we've included Laravel Mix — a fluent API for defining Webpack build steps using several common CSS and JavaScript pre-processors. Through simple method chaining, you can fluently define your asset pipeline.
If you've ever been confused and overwhelmed about getting started with Webpack and asset compilation, you will love Laravel Mix.
Installation
Install node & npm
Before triggering Mix, you must first ensure that Node.js and NPM are installed on your machine. Download and install version for your system.
Then, install theme's package
When you're good with node & npm, the only remaining step is to install Laravel Mix & theme's package dependencies. You'll find a package.json file in the root of your directory structure. The default package.json file includes everything you need to get started. Think of this like your composer.json file, except it defines Node dependencies instead of PHP.
To install dependencies open system command line, cd to project's dir & run:
npm install
Usage
Configuration
Theme's assets are pre-built for your convenience and located in the public/_assets folder. Preconfigured build logic is located at webpack.mix.js. Feel free to head up to Mix's docs for more information.
Theme's project sources are located at resources folder.
Building assets
There are 2 primary commands to build assets from sources:
npm run development builds non-minified sources for development environment (command runs much faster, than production).
npm run production builds production-ready minified sources.
More info
You are free to uses theme's sources in your own build environment. If you would like to learn more about Mix, feel free to head up to Mix's docs.