Axe & Handle Updated to include WebPack / Laravel Mix

Categories: Design

While I continually update Axe and Handle as I work on new projects, I had a request to add WebPack and thought rather than going into a complicated build process I would add Laravel Mix.

Feel free to install Bootstrap, jQuery and other resources using NPM. But you now have the full power of Laravel Mix from Jeffery Way.

Check out Axe and its child theme Handle.

Both runs with the same Laravel Mix commands like nmp run dev or nmp run watch, and npm run prod.

Vendor Extraction

Vendor Extraction also works the same as you might see in a Laravel project. Make sure to add .extract(['jquery']) to your scripts or js processing. A manifest.js fill will be created and will have to be loaded before all other Javascript.

In order for the vendor.js to work properly, you also need to include manifest.js and the property includes that library in your javascript for example. To extract jQuery would have to need to properly imported with ECMAScript 6 import $ from 'jquery';

Next, update your site to load the manifest.js, vendor.js, and app.js.

<script src="/assets/js/manifest.js"></script>
<script src="/assets/js/vendor.js"></script>
<script src="/assets/js/app.js"></script>

You can also use mix() here if you like.

Versioning / Cache Busting

Because we are using Mix we can also generate a mix-manifest.json file to version/bust some cache!

In order to properly version files, you must configure your themes public path. But since this is already part of Axe and Handle, there is nothing for you to do. But Handle does not come with any CSS or Javascript so unless you keep the same conventions as Axe you will need to make some adjustments.

Next, you can pass mix() your asset relative to the root of the theme. If the asset is not found in the manifest or the manifest file is not found. The original path will be passed back to the template.

mix('/assets/js/app.js') would result in something like: /assets/js/app.js?id=0b19d505dc2d65c946f3

mix('/assets/js/appNOFILE.js') would result in something like: /assets/js/appNOFILE.js

Let me know if you use this in any of your own projects or if it helped in any way.

Enjoy!


Adam Patterson

Adam Patterson

User Interface Designer & Developer with a background in UX. I have spent 5 years as a professionally certified bicycle mechanic and ride year-round.

I am a husband and father of two, I enjoy photography, music, movies, coffee, and good food.

You can find me on Twitter, Instagram, and YouTube!