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: [ /.*v-*/ ] }) ] }) 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()