const mix = require('laravel-mix');
const DashboardPlugin = require('webpack-dashboard/plugin');
const webpack = require('webpack');
const path = require('path');

/*
 |--------------------------------------------------------------------------
 | 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 your application, as well as bundling up your JS files.
 |
 */

const assetsDir = './resources/assets/';

mix
    .setPublicPath('public')
    .js(`${assetsDir}js/app.js`, 'public/js')
    .sass(`${assetsDir}scss/app.scss`, 'public/css')
    .extract([
        'vue',
        'vuex',
        'vue-touch',
        'moment',
        'axios',
        'velocity-animate'
    ])
    .version()
    .options({
        // @TODO Currently removes too much probably because of incorrect file scans.
        // purifyCss: true,
        // extractVueStyles: 'public/css/vue-css.css',
        processCssUrls: false
    });

// Version our images?
mix.version(['public/images/svg'])

/*
 |--------------------------------------------------------------------------
 | Vendor SCSS file
 |--------------------------------------------------------------------------
 |
 | The vendor file for the SCSS is built separately to increase webpack build
 | performance but also to keep a cache file for visitors.
 |
 */

mix
    .setPublicPath('public')
    .sass(`${assetsDir}scss/vendors/vendors.scss`, 'public/css');

/*
 |--------------------------------------------------------------------------
 | Webpack configuration overrides
 |--------------------------------------------------------------------------
 |
 | By default the webpack.config.js configuration from the laravel-mix package
 | is being used to compile assets. We can override and extend the webpack
 | configuration with our own configuration here.
 |
 */

mix.webpackConfig({
    devServer: {
        overlay: true
    },
    module: {
        rules: [
            {
                test: /\.(vue|js)$/,
                loader: 'eslint-loader',
                enforce: 'pre',
                exclude: /node_modules/
            },
            {
                test: /\.svg$/,
                use: [
                    {
                        loader: 'raw-loader'
                    }
                ]
            }
        ]
    },
    plugins: [
        new DashboardPlugin(),
        new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /nl|en|de|fr/)
    ],
    resolve: {
        modules: [
            path.resolve('./'),
            path.resolve('./node_modules')
        ]
    }
});