webpack.mix.js

let mix = require('laravel-mix');
let autoprefixer = require('autoprefixer');
let tailwindcss = require('tailwindcss');
require('laravel-mix-purgecss');
require('laravel-mix-favicon');
// require('laravel-mix-postcss-config');

mix.setPublicPath('web/dist')
	// Generate PostCSS file.
	.postCss('src/css/app.pcss', 'css', [require('postcss-nested'), tailwindcss('tailwind.config.js'), autoprefixer])
	// .postCssConfig()
	.sourceMaps(true, 'source-map')
	.version()

	// Lets font awesome get loaded.
	.options({ processCssUrls: false })

	// Remove unused CSS in production.
	// .purgeCss({
	// 	enabled: mix.inProduction(),
	// 	folders: ['src', 'templates'],
	// 	extensions: ['html', 'js', 'twig'],
	// })

	// Generate JavaScript file.
	.js('src/main.js', 'js')

	// Minify CSS and Javascript for production build
	.minify(['web/dist/css/app.css', 'web/dist/js/main.js'])

	// Disable terminal notifications on build
	.disableNotifications()

	// Render site favicon.
	.favicon({
		inputPath: 'src/img/favicon',
		inputFile: '*.{jpg,png,svg}',
		publicPath: 'web/',
		output: 'web/',
		dataFile: 'data/faviconData.json',
		blade: 'web/dist/favicon.html',
		reload: false,
		debug: false,
		configPath: './realfavicongenerator-config.json',
	})

	// Hot Module Reloading.
	// This only works for reloading assets and not template files.
	.webpackConfig({
		target: 'web',
		output: {
			publicPath: 'http://127.0.0.1:8081/',
		},
		devServer: {
			// public: 'http://127.0.0.1:8081/',
			client: {
				webSocketURL: 'http://127.0.0.1:8081/',
			},
			host: '127.0.0.1',
			port: 8081,
			headers: {
				'Access-Control-Allow-Origin': '*',
			},
		},
	})

	// Use browsersync instead of HMR to refresh CSS, JS and Template files.
	.browserSync({
		// Pulls SITE_URL form the .env file.
		proxy: process.env.SITE_URL,
		// proxy: 'http://example.test',
		files: ['web/dist/css/**/*.css', 'web/dist/js/**/*.js', 'templates/**/*.twig'],
		open: true,
		ghostMode: false,
		reloadDelay: 800,
	});

// * Helpful Links
// * ===============

// * Laravel Mix Documentation
// * https://laravel-mix.com/docs/6.0/installation

// * Webpack Dev Server Documentation
// * https://webpack.js.org/configuration/dev-server/

// * Browsersync Docs / Options
// * https://www.browsersync.io/docs/options