Compiling Assets with Laravel Mix

I'm new to Laracasts, so go easy at first. I've been using Laravel for about 1-year now and love it after migrating code from an old MVC framework to Laravel. I'm trying to fine tune my package now and want to use Laravel Mix. The whole application is running via NGINX in a Docker container, but the files are bound to a folder on my host. I have composer, NPM and Node installed in both the container and host because it is convenient to run from the host time sometimes.

Anyways, I've been using oomphinc/composer-installers-extender for bower-asset and npm-asset for awhile during development because I can map the assets to my public folder where I can serve them directly. I started playing around with Laravel Mix and I've had some issues getting everything to compile and install correctly, but it would be useful to use Mix for production. Just looking for some pointers getting it all setup correctly because using Mix and webpack seems like a great feature.

My composer.json contains these bower and npm assets:

"require": {
	. . . . 
    "bower-asset/bootstrap": "~4.5",
    "bower-asset/cropperjs": "^1.5",
    "bower-asset/dropzone": "^5.7",
    "bower-asset/font-awesome": "~5.14",
    "bower-asset/jquery-migrate": "~3.0",
    "bower-asset/jquery-timepicker-jt": "~1.13",
    "bower-asset/jquery-ui": "~1.12",
    "bower-asset/jquery-validation": "~1.19",
    "bower-asset/moment": "^2.29",
    "bower-asset/moment-timezone": "^0.5.31",
    "bower-asset/pdfjs-dist": "~2.6.347",
    "bower-asset/plupload": "^3.1",
    "bower-asset/sumoselect": "~3.0",
	. . . . 
    "npm-asset/boxicons": "^2.0",
    "npm-asset/jquery": "^3.6",
	. . . .
		}

and my layout has mostly these:

	/bower/boxicons/css/boxicons.min.css
	/bower/datatables.min.css (except because I copied the cdn that I built from datatables)
	/bower/jquery-timepicker-jt/jquery.timepicker.min.css

	/bower/jquery/dist/jquery.min.js
	/bower/jquery-migrate/jquery-migrate.min.js
	/bower/bootstrap/dist/js/bootstrap.min.js
	/bower/jquery-ui/jquery-ui.min.js
	/bower/jquery-timepicker-jt/jquery.timepicker.min.js
	/bower/moment/min/moment.min.js
	/bower/moment-timezone/builds/moment-timezone-with-data-1970-2030.min.js
	/bower/jquery-validation/dist/jquery.validate.min.js
	/bower/jquery-validation/dist/additional-methods.min.js
	/bower/sumoselect/jquery.sumoselect.min.js
	/bower/datatables.min.js   (except because I copied the cdn that I built from datatables)

I also have these in: /resources/sass/app.scss

	@import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
	@import '../../node_modules/animate.css/animate.min.css';
	@import '../../node_modules/sumoselect/sumoselect.min.css';
	@import '../../node_modules/@fortawesome/fontawesome-free/css/all.min.css';
	@import '../../node_modules/jquery-ui/themes/base/all.css';
	@import '../../node_modules/jquery-ui-themes/themes/dark-hive/theme.css';

and they are apparently getting compiled because because my css looks ok and changes if I change that.

I don't have much of anything in: /resources/js/app.js, although I was playing around with it:

	require('./bootstrap');
	require('./common.js');
	import 'alpinejs';
	// import $ from 'jquery';
	// window.$ = window.jQuery = $;
	//
	// require('jquery-migrate');
	// require('jquery-validation');
	// require('popper.js')
	// require('bootstrap');
	// require('jquery-ui');
	// require('sumoselect');
	// require('jquery-timepicker/jquery.timepicker.js')
	// //
	// import 'jquery-ui/ui/widgets/datepicker.js';
	// import 'jquery-ui/ui/widgets/tabs.js';
	//
	// Above are for using Laravel Mix

webpack.mix.js has: const mix = require('laravel-mix');

	mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 'public/css', [
		require('postcss-import'),
		require('tailwindcss')
	]).sass('resources/sass/app.scss', 'public/css');

popper.js seems to be a bit of an exception also.

Sorry for the long post, but that might help. I think my main problem is figuring out how to correctly setup some of the js stuff.

Thanks.