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 also works the same as you might see in a Laravel project. Make sure to add
.extract(['jquery']) to your
In order for the
vendor.js to work properly, you also need to include
import $ from 'jquery';
Next, update your site to load the
<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!
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:
mix('/assets/js/appNOFILE.js') would result in something like:
Let me know if you use this in any of your own projects or if it helped in any way.