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.