Laravel Mix Webpack Setup for WordPress, Sage by Roots and Tailwind

webpack.mix.js

const mix = require('laravel-mix');
const ImageminPlugin = require('imagemin-webpack-plugin').default;

require('laravel-mix-tailwind');
require('laravel-mix-purgecss');

const assetsPath = 'resources/assets';
const distPath = './dist';
const publicPath = '/wp-content/themes/THEME_NAME';

mix.setPublicPath(distPath);
mix.setResourceRoot('../');


mix.webpackConfig({
    plugins: [
        new ImageminPlugin({
            pngquant: {
                quality: '95-100',
            },
            test: /\.(jpe?g|png|gif|svg)$/i,
        }),
    ],
})

mix.js(`${assetsPath}/scripts/main.js`, `${distPath}/js`);

mix.sass(`${assetsPath}/styles/main.scss`, `${distPath}/styles/`)
    .options({
        processCssUrls: false,
        postCss: [require('tailwindcss')('./tailwind.config.js')],
    })
    .purgeCss({
        whitelistPatterns: [/flickity*/, /gform*/, /ginput*/, /validation*/, /fa-2x/, /fa-phone/, /fa-browser/, /fa-globe/, /fa-envelope/, /fa-twitter/, /fa-facebook/, /fa-instagram/, /fa-yelp/, /fa-linkedin/, /fa-check-circle/],
        whitelistPatternsChildren: [/flickity*/, /gform*/, /ginput*/],
    })
    .copyDirectory(`${assetsPath}/images`, `${distPath}/images/`, false)
    .copyDirectory(`${assetsPath}/webfonts`, `${distPath}/webfonts`)
    .copyDirectory('node_modules/@fortawesome/fontawesome-pro/webfonts', `${distPath}/fonts/`)

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