Webpack Mix

webpack.mix.js

/**
 Takes an n-depth JSON resource structure and creates a css and a js file from each leaf.
 In the JSON each leaf represents a page and each leaf must have a coresponding js and 
 less resource file. By each page having a separate resource file I can ensure that
 no unnecessary front end code will be loaded. 
 
 In addition it is very easy to have a separate json file containing only one / few pages 
 to always build only the pages assets that I am working on.
 */

const argv = require('yargs').argv;
const log4js = require('log4js');
log4js.configure({
  appenders: {
    out: { type: 'stdout' },
    app: { type: 'file', filename: 'npm.log' }
  },
  categories: {
    default: { appenders: [ 'out', 'app' ], level: 'debug' }
  }
});

Object.byString = function(o, s) {
    s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
    s = s.replace(/^\./, '');           // strip a leading dot
    var a = s.split('.');
    for (var i = 0, n = a.length; i < n; ++i) {
        var k = a[i];
        if (k in o) {
            o = o[k];
        } else {
            return;
        }
    }
    return o;
}

const logger = log4js.getLogger('app');
let mix = require('laravel-mix');
let pagesjson = require("./pages.json");
mix.options({ processCssUrls: false });

var prefix = '';

if (typeof argv.env !== 'undefined') {
  if (typeof argv.env.pages !== 'undefined') {
    prefix = argv.env.pages.replace(/\./g, '/') + '/';
    pagesjson = Object.byString(pagesjson, argv.env.pages);
  } 
}

getPath(pagesjson);

function getPath(object, path) {
    path = path || [];
    Object.keys(object).forEach(function (key) {
        if (object[key] && typeof object[key] === 'object') {
            return getPath(object[key], path.concat(key));
        }

        final = path.concat([key,object[key]]).join('/');
        final = final.slice(0, -1);
        final = prefix + final;
        mix.less('resources/assets/less/page/'+final + '.less', 'public/css/'+final+".css");
        mix.js('resources/assets/js/page/'+final + '.js', 'public/js/'+final+".js");
        
    });
}

mix.sourceMaps();