stagfe/webpack.mix.js

const mix = require('laravel-mix')
const webpack = require('webpack')
const glob = require('glob-all')
const PurgecssPlugin = require('purgecss-webpack-plugin')
const whitelister = require('purgecss-whitelister')
require('laravel-mix-bundle-analyzer')
require('laravel-mix-purgecss')
require('laravel-mix-vue-svgicon')

mix.disableNotifications()
class Extractor {
    static extract(content) {
        return content.match(/[A-Za-z0-9-_:\/]+/g) || []
    }
}

mix.webpackConfig({
    optimization: {
        providedExports: true,
        usedExports: true,
        sideEffects: true
    },
    output: {
        filename: '[name].js',
        chunkFilename: 'js/chunks/[name].js?id=[chunkhash]'
    },
    plugins: [
        new PurgecssPlugin({
            paths: glob.sync([
                path.join(__dirname, 'resources/views/**/*.blade.php'),
                path.join(__dirname, 'resources/js/**/*.vue'),
            ]),
            extractors: [
                {
                    extractor: Extractor,
                    extensions: ['html', 'js', 'php', 'vue'],
                },
            ],
            whitelist: whitelister([
                './node_modules/vuetify/dist/vuetify.min.css',
                './node_modules/toastr/build/toastr.css'
            ]),
            whitelistPatterns: [
                /.*q-*/,
                /.*relative-position*/,
                /.*expand-*/,
                /.*vue-grid*/
            ]
        })
    ]
})

mix.babelConfig({
    presets: [
        [
            '@babel/preset-env',
            {
                modules: false
            }
        ]
    ]
})

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

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .options({
        processCssUrls: false
    })
    .svgicon('public/img')
    .version()

//mix.bundleAnalyzer()