const path = require("path");
const mix = require("laravel-mix");

mix.setPublicPath("public/build");
mix.setResourceRoot("/build");

require("laravel-mix-polyfill");
require("laravel-mix-clean");
require("laravel-mix-eslint");
require("laravel-mix-stylelint");

const assetDir = "assets";
const polyfill = {
    enabled: true,
    bugfixes: true,
    useBuiltIns: "usage",
    targets: "last 3 version, not dead, >0.3%",
};

mix.webpackConfig({
    resolve: {
        extensions: ["*", ".js"],
        alias: {
            "@": path.resolve("resources/assets"),
        },
    },
});

mix.options({
    fileLoaderDirs: {
        fonts: `${assetDir}/fonts`,
        images: `${assetDir}/images`,
    },
    postCss: [
        require("postcss-discard-comments")({
            removeAll: true,
        }),
    ],
});

mix.clean({
    cleanOnceBeforeBuildPatterns: [
        "css/*",
        "js/*",
        "images/*",
        "fonts/*",
        "assets/*",
    ],
});

/*
 |--------------------------------------------------------------------------
 | 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", "js")
    .js("resources/js/ajax.js", "js")
    .js("resources/js/Chart.js", "js")
    .js("resources/js/jquery.fancybox.min.js", "js")
    .css("resources/css/jquery.fancybox.min.css", "css")
    .sass("resources/sass/app.scss", "css")
    .copyDirectory("resources/assets", "public/build/assets")
    .polyfill(polyfill)
    .sourceMaps(false, "inline-source-map")
    .version();