Mix (Webpack) configuration

mix.webpack.js

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

const colors = require('chalk');
const { green, blue } = colors;

const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');

const resolve = (alias, dir) => ({
	 [alias]: path.join(__dirname, '.', dir)
});

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | your Laravel application. By default, we compile the Sass file for the 
 | application as well as bundling up all the JS files.
 |
 */

const stylesheet_paths = [ 'resources/assets/sass' ];

const len = list => list.length;
const stub = () => undefined;

const LogRegisteredAliasFmt = (alias, keys) =>
	green.bold(keys[0] + '/') + ' (maps to -> ' + blue.bold(alias[keys[0]]) + ')';

const MappingEventLogger = (alias, list, i) => (
	console.log('Registered path alias', LogRegisteredAliasFmt(alias, Object.keys(alias))),
	(len(list) === i)? console.log(''): stub());

const ArrayCombine = (...array) => ((list, ref = {}) => (
		array.forEach( path => (
			path.forEach( (alias, i) => MappingEventLogger(alias, list, i + 1)),
			Object.assign( ref, ...path ))), ref ))(...array);

const completed = () => (
		console.log(),
		console.log( 'Successfully built', colors.green.bold( 'PharmAssist R1' ) + '.' ),
		console.log());

const alias = ArrayCombine([
	resolve('@', 'resources/assets/js'),
	resolve('@pages', 'resources/assets/js/pages'),
	resolve('@style', 'resources/assets/js/style'),
	resolve('@component', 'resources/assets/js/components'),
	resolve('@runtime', 'resources/assets/js/runtime'),
	resolve('@app', 'resources/assets/js/app'),
	resolve('@http', 'resources/assets/js/backend'),
	resolve('@layout', 'resources/assets/js/layout'),
	resolve('@store', 'resources/assets/js/store'),
	resolve('@runtime', 'resources/assets/js/runtime'),
	resolve('@router', 'resources/assets/js/router'),
]);

mix.webpackConfig({
	devtool: 'inline-source-map',
	
	plugins: [
		new SWPrecacheWebpackPlugin({
			cacheId: 'pwa',
			filename: 'service-worker.js',

			staticFileGlobs: [
				 'public/**/*.{css,eot,svg,ttf,woff,woff2,js,html}'
			],
			minify: true,

			stripPrefix: 'public/',
			handleFetch: true,

			staticFileGlobsIgnorePatterns: [
				 /\.map$/,
				 /mix-manifest\.json$/,
				 /manifest\.json$/,
				 /service-worker\.js$/
			],

			runtimeCaching: [
				{
					urlPattern: /^https:\/\/fonts\.googleapis\.com\//,
					handler: 'cacheFirst'
				},
			]
		})
	],
	
	resolve: {
		  alias,
		  extensions: ['.js', '.ts', '.vue']
	},
	node: {
		  // prevent webpack from injecting useless setImmediate polyfill because Vue
		  // source contains it (although only uses it if it's native).
		  setImmediate: false,
		  // prevent webpack from injecting mocks to Node native modules
		  // that does not make sense for the client
		  dgram: 'empty',
		  fs: 'empty',
		  net: 'empty',
		  tls: 'empty',
		  child_process: 'empty'
	}
});

if (!mix.inProduction())
{	
//	mix.sourceMaps()
}
else {	
//	mix.minify(stylesheet_paths);
	
	mix.extract([
		'axios',
		'vue',
		'vuex',
		'vuetify',
		'vue-i18n',
		'vue-meta',
		'vuelidate'
	]);
}

mix.options({
	uglify: {
		uglifyOptions: {
			compress: true,
			mangle: true,
		},
	},
	
	extractVueStyles: 'public/WebCore/css/vue.css',
	clearConsole: true
})
	.sass('resources/assets/sass/WebShell.scss',					'public/WebCore/css')
	.sass('resources/assets/sass/WebCore.scss',						'public/WebCore/css')
	.js('resources/assets/js/app/MyHealthyUS/index.js',				'public/WebCore/js/MyHealthyUS.js')
	.js('resources/assets/js/app/ASLSeniorSelect/index.js',			'public/WebCore/js/ASLSeniorSelect.js')
	.js('resources/assets/js/app/FloridaDiscountDrugPref/index.js',	'public/WebCore/js/FloridaDiscountDrugPref.js')
	.js('resources/assets/js/app/WebShell.js',						'public/WebCore/js/Shell.js')
	.version()
;

mix.then(completed);