Webpack.mix.js example using PurgeCSS

webpack.mix

const mix               = require('laravel-mix')
const tailwindcss       = require('tailwindcss')
const ImageminPlugin    = require('imagemin-webpack-plugin').default
const CopyWebpackPlugin = require('copy-webpack-plugin')
const imageminMozjpeg   = require('imagemin-mozjpeg')

const purgecssForAdmin = require('@fullhuman/postcss-purgecss')({
    content         : [
        './node_modules/noty/**/*.css', './node_modules/noty/**/*.scss',
        './node_modules/animate.css/**/*.css', './node_modules/animate.css/**/*.scss',
        './node_modules/hint.css/**/*.css', './node_modules/hint.css/**/*.scss',
        './node_modules/tinymce/**/*.css', './node_modules/tinymce/**/*.scss',
        './resources/views/admin/**/*.blade.php',
        './resources/admin/css/**/*.css',
        './resources/js-modules/*.js'],
    defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
})

const purgecssForSite = require('@fullhuman/postcss-purgecss')({
    content         : [
        './resources/views/site/**/*.blade.php',
        './resources/site/css/**/*.css',
        './resources/js-modules/*.js',
    ],
    defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
})

const imageminConfig = {
    test   : /\.(jpe?g|png|gif|svg)$/i,
    optipng: {
        optimizationLevel: 9,
    },
    plugins: [
        imageminMozjpeg({
            quality    : 70,
            progressive: true,
        }),
    ],
}

mix.js('resources/admin/js/app.js', 'public/admin/js')
    .copy('node_modules/tinymce/skins', 'public/admin/js/skins')
    .postCss('resources/admin/css/app.css', 'public/admin/css', [
        require('tailwindcss')('./tailwind-admin.config.js'),
        ...process.env.NODE_ENV === 'production' ? [purgecssForAdmin] : [],
    ]).webpackConfig({
    plugins: [
        new CopyWebpackPlugin([{
            from: 'resources/admin/img/',
            to  : './admin/img',
        }]),
        new ImageminPlugin(imageminConfig),
    ],
})

mix.js('resources/site/js/app.js', 'public/site/js')
    .postCss('resources/site/css/app.css', 'public/site/css', [
        require('tailwindcss')('./tailwind-site.config.js'),
        ...process.env.NODE_ENV === 'production'
            ? [purgecssForSite]
            : [],
    ]).webpackConfig({
    plugins: [
        new CopyWebpackPlugin([{
            from: 'resources/site/img/',
            to  : './site/img',
        }]),
        new ImageminPlugin(imageminConfig),
    ],
})

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