ldc-jeusselin/vite.config.ts

import purge from "@erbelion/vite-plugin-laravel-purgecss";
import basicSsl from "@vitejs/plugin-basic-ssl";
import vue from "@vitejs/plugin-vue";
import autoprefixer from "autoprefixer";
import laravel from "laravel-vite-plugin";
import path from "path";
import postcssDiscard from "postcss-discard-comments";
import copy from "rollup-plugin-copy";
import { ConfigEnv, UserConfig, defineConfig, loadEnv } from "vite";
import babel from "vite-plugin-babel";
import checker from "vite-plugin-checker";
import eslint from "vite-plugin-eslint";
import stylelint from "vite-plugin-stylelint";
import { sassSafelist } from "./resources/ts/utilities/sass-safelist";

const env = loadEnv("r", process.cwd(), "");

const purgePlugin = purge({
    templates: ["blade"],
    paths: ["resources/{js,ts,views}/**/*.{ts,js,vue,blade.php}"],
    safelist: sassSafelist,
});

const debugMode = ["local", "development"].find((mod) => process.env.NODE_ENV === mod) !== undefined;

// eslint-disable-next-line @typescript-eslint/no-unused-vars
purgePlugin.apply = (config: UserConfig, env: ConfigEnv) => !debugMode;

export default defineConfig({
    build: {
        rollupOptions: {
            output: {
                entryFileNames: `assets/${
                    debugMode ? "[name]-" : ""
                }[hash].js`,
                chunkFileNames: `assets/${
                    debugMode ? "[name]-" : ""
                }[hash].js`,
                assetFileNames: `assets/${
                    debugMode ? "[name]-" : ""
                }[hash].[ext]`,
            },
        },
        emptyOutDir: true,
        sourcemap: debugMode ? "inline" : false,
    },
    css: {
        preprocessorOptions: {
            scss: {
                quietDeps: true
            }
        },
        devSourcemap: debugMode ? true : false,
        postcss: {
            map: {
                inline: true,
            },
            plugins: [
                postcssDiscard({
                    removeAll: true,
                }),
                autoprefixer(),
            ],
        },
    },
    plugins: [
        basicSsl(),
        checker({
            enableBuild: true,
            vueTsc: {
                root: ".",
                tsconfigPath: "tsconfig.json",
            },
            typescript: {
                root: ".",
                tsconfigPath: "tsconfig.json",
            },
            eslint: {
                lintCommand:
                    "eslint --quiet -c .eslintrc.json \"./resources/ts/*\"",
            },
            stylelint: {
                lintCommand:
                    "stylelint --quiet -c .stylelintrc.json --fix **/resources/**/*.scss",
            },
        }),
        laravel({
            input: [
                "resources/sass/bo/bo.scss",
                "resources/ts/bo/bo.ts",
                "resources/sass/fo/fo.scss",
                "resources/ts/fo/fo.ts",
            ],
            refresh: true,
        }),
        copy({
            targets: [
                {
                    src: [
                        // * Engine copy (Default favicon)
                        path.normalize("resources/favicon/android-chrome-192x192.png"),
                        path.normalize("resources/favicon/android-chrome-512x512.png"),
                        path.normalize("resources/favicon/apple-touch-icon.png"),
                        path.normalize("resources/favicon/browserconfig.xml"),
                        path.normalize("resources/favicon/browserconfig.xml"),
                        path.normalize("resources/favicon/favicon-16x16.png"),
                        path.normalize("resources/favicon/favicon-32x32.png"),
                        path.normalize("resources/favicon/favicon.ico"),
                        path.normalize("resources/favicon/mstile-150x150.png"),
                        path.normalize("resources/favicon/safari-pinned-tab.svg"),
                        path.normalize("resources/favicon/site.webmanifest"),
                    ],
                    dest: path.normalize("public")
                },
            ],
            copyOnce: true,
            verbose: true
        }),
        stylelint({
            dev: false,
            build: true,
            cache: false,
            chokidar: true,
            include: ["**/resources/**/*.scss", "**/resources/**/*.css"],
            exclude: ["node_modules", "vendor"],
            lintOnStart: false,
            emitError: true,
            emitWarning: true,
            emitErrorAsWarning: false,
            emitWarningAsError: true,
        }),
        eslint({
            cache: false,
            extensions: ["js", "ts"],
            include: "**/*.ts",
            exclude: ["node_modules", "vendor"],
            lintOnStart: false,
            emitWarning: true,
            emitError: true,
            failOnWarning: false,
            failOnError: false,
        }),
        babel(),
        vue({
            isProduction: !debugMode,
            exclude: ["node_modules", "vendor"],
        }),
        purgePlugin
    ],
    server: {
        https: true,
        host: env["APP_URL"] ? new URL(env["APP_URL"]).hostname : "",
        port: 4443,
        watch: {
            usePolling: true,
        },
    },
    resolve: {
        extensions: ["*", ".js", ".ts", ".vue"],
        alias: [
            {
                find: "vue",
                replacement: "vue/dist/vue.runtime.esm-bundler.js",
            },
            {
                find: "@",
                replacement: "/resources/assets",
            },
            {
                find: "~",
                replacement: path.resolve(__dirname, "./node_modules"),
            },
        ],
    },
});