Mix 4 Sage - Toby

assets.php

<?php
/**
 * Label Assets
 *
 * @package label
 * @since 1.0
 */

namespace Craftpeak\Label\Assets;

/**
 * Get paths for assets
 */
class JsonManifest {
	private $manifest;

	/**
	 * JsonManifest constructor.
	 *
	 * @param $manifest_path
	 */
	public function __construct( $manifest_path ) {
		if ( file_exists( $manifest_path ) ) {
			$this->manifest = json_decode( file_get_contents( $manifest_path ), true );
		} else {
			$this->manifest = [];
		}
	}

	/**
	 * Get the manifest
	 *
	 * @return array
	 */
	public function get() {
		return $this->manifest;
	}

	/**
	 * Get the path of something from the manifest
	 *
	 * @param string $key
	 * @param null $default
	 *
	 * @return array|mixed|null
	 */
	public function get_path( $key = '', $default = null ) {
		$collection = $this->manifest;
		if ( is_null( $key ) ) {
			return $collection;
		}
		if ( isset( $collection[ $key ] ) ) {
			return $collection[ $key ];
		}
		foreach ( explode( '.', $key ) as $segment ) {
			if ( ! isset( $collection[ $segment ] ) ) {
				return $default;
			} else {
				$collection = $collection[ $segment ];
			}
		}

		return $collection;
	}
}

/**
 * Get the Asset Name from the filename
 *
 * @param $filename
 *
 * @return string
 */
function asset_name( $filename ) {
	$slash_filename = '/' . $filename;
	static $manifest;

	if ( empty( $manifest ) ) {
		$manifest_path = get_template_directory() . '/dist/mix-manifest.json';
		$manifest      = new JsonManifest( $manifest_path );
	}

	if ( array_key_exists( $slash_filename, $manifest->get() ) ) {
		return $manifest->get()[ $slash_filename ];
	} else {
		return $slash_filename;
	}
}

/**
 * Get the Asset Path from the filename
 *
 * @param $filename
 *
 * @return string
 */
function asset_path( $filename ) {
	$dist_path  = get_template_directory_uri() . '/dist';
	$asset_name = asset_name( $filename );

	return $dist_path . $asset_name;
}

package.json

{
  "name": "mix-4-sage",
  "version": "2.0.0",
  "author": "Julien <julien@craftpeak.com>",
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "engines": {
    "node": ">= 8"
  },
  "devDependencies": {
    "browser-sync": "^2.18.13",
    "browser-sync-webpack-plugin": "^1.2.0",
    "expose-loader": "^0.7.4",
    "laravel-mix": "^1.5.0",
  },
  "dependencies": {
    "add": "^2.0.6",
    "bootstrap": "4.0.0-beta.2",
    "cross-env": "^5.0.5",
    "jquery": "1.12.4 -3",
    "yarn": "^1.2.0"
  }
}

webpack.mix.js

const mix = require( 'laravel-mix' );

// Fix for versioning to work: https://github.com/JeffreyWay/laravel-mix/issues/939
mix.setPublicPath( 'dist' );

// Fix for fonts...
mix.setResourceRoot( '../' );

// Main site scripts and styles
mix.js( 'assets/scripts/main.js', 'dist/scripts' );
mix.sass( 'assets/styles/main.scss', 'dist/styles' );
mix.copy( 'assets/images/*', 'dist/images' );
mix.copy( 'assets/icons/*', 'dist/icons' );

// Customizer JS
mix.js( 'assets/scripts/customizer.js', 'dist/scripts' );

// Move jQuery out to a vendor file
mix.extract( 'jquery' );

// Expose jQuery to the window!
mix.webpackConfig( {
	module: {
		rules: [
			{
				test: require.resolve( 'jquery' ),
				use: [
					{
						loader: 'expose-loader',
						options: 'jQuery'
					}
				]
			}
		]
	}
} );


if ( ! mix.inProduction() ) {
	// Browserync
	mix.browserSync( {
		proxy: 'https://test.cooler.local',
		files: ['{src,templates}/**/*.php', '*.php'],
		snippetOptions: {
			whitelist: ['/wp/wp-admin/admin-ajax.php'],
			blacklist: ['/wp/wp-admin/**'],
		},
	} );

	mix.sourceMaps();
}

if ( mix.inProduction() ) {
	mix.version();
}