Laravel Mix is a powerful and easily configurable module bundler.
Wordpress and your static assets
Out of the box, WordPress will reference your site’s theme files in various places. You’ve got some CSS files that are added to the <head>, some that go in the footer, others that are enqueued and could end up in either place. You’ve also got all those doc blocks that are necessary inside your site’s
style.css file that you shouldn’t touch, which make it hard to minify.
We get annoyed at all these steps, which is why we’ve landed on using laravel mix to help us manage these assets.
In the root of your theme, run the following command to install
npm i laravel-mix
Next, still in the root of your theme, create a new file called
webpack.mix.js and add the code below:
// webpack.mix.js let mix = require('laravel-mix'); mix.js('src/app.js', 'dist').setPublicPath('dist').version();
This will tell laravel-mix to compile
src/app.js and output it in the
dist folder. The addition of
.version() will generate a random hash to append to the filename, forcing browsers to update their cache. To add other types of files, check out these examples.
To compile once:
To watch for changes:
npx mix watch
better-wordpress will automatically look for Laravel Mix’s
mix-manifest.json in the
The only requirement on your end is to include the
wp_head() function in your theme’s
<head> element. For example:
<!doctype html> <!-- header.php --> <html <?php language_attributes(); ?>> <head> ... <?php wp_head(); ?> ... </head> <body <?php body_class(); ?>>