photoprism/frontend/webpack.config.js

const path = require("path");

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const webpack = require("webpack");

const isDev = process.env.NODE_ENV !== "production";

if(isDev) {
    console.log("Building frontend in DEVELOPMENT mode. Please wait.");
} else {
    console.log("Building frontend in PRODUCTION mode. Please wait.");
}

const PATHS = {
    app: path.join(__dirname, "src/app.js"),
    share: path.join(__dirname, "src/share.js"),
    js: path.join(__dirname, "src"),
    css: path.join(__dirname, "src/css"),
    build: path.join(__dirname, "../assets/static/build"),
};

const config = {
    mode: isDev ? "development" : "production",
    devtool: isDev ? "inline-source-map" : false,
    entry: {
        app: PATHS.app,
        share: PATHS.share,
    },
    output: {
        path: PATHS.build,
        filename: "[name].js",
    },
    resolve: {
        modules: [
            path.join(__dirname, "src"),
            path.join(__dirname, "node_modules"),
        ],
        alias: {
            vue: isDev ? "vue/dist/vue.js" : "vue/dist/vue.min.js",
        },
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
        }),
    ],
    node: {
        fs: "empty",
    },
    performance: {
        hints: isDev ? false : "error",
        maxEntrypointSize: 4000000,
        maxAssetSize: 4000000,
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                include: PATHS.app,
                exclude: /node_modules/,
                enforce: "pre",
                loader: "eslint-loader",
                options: {
                    formatter: require("eslint-formatter-pretty"),
                },
            },
            {
                test: /\.vue$/,
                loader: "vue-loader",
                include: PATHS.js,
                options: {
                    loaders: {
                        js: "babel-loader",
                        css: "css-loader",
                    },
                },
            },
            {
                test: /\.js$/,
                loader: "babel-loader",
                include: PATHS.js,
                exclude: file => (
                    /node_modules/.test(file)
                ),
                query: {
                    presets: ["@babel/preset-env"],
                    compact: false,
                },
            },
            {
                test: /\.css$/,
                include: PATHS.css,
                exclude: /node_modules/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            hmr: false,
                            fallback: "vue-style-loader",
                            use: [
                                "style-loader",
                                {
                                    loader: "css-loader",
                                    options: {
                                        importLoaders: 1,
                                        sourceMap: isDev,
                                    },
                                },
                                {
                                    loader: "postcss-loader",
                                    options: {
                                        sourceMap: isDev,
                                        config: {
                                            path: path.resolve(__dirname, "./postcss.config.js"),
                                        },
                                    },
                                },
                                "resolve-url-loader",
                            ],
                            publicPath: PATHS.build,
                        },
                    },
                    "css-loader",
                ],
            },
            {
                test: /\.css$/,
                include: /node_modules/,
                loaders: [
                    "vue-style-loader",
                    "style-loader",
                    {
                        loader: "css-loader",
                        options: { importLoaders: 1, sourceMap: isDev },
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                            sourceMap: isDev,
                            config: {
                                path: path.resolve(__dirname, "./postcss.config.js"),
                            },
                        },
                    },
                    "resolve-url-loader",
                ],
            },
            {
                test: /\.s[c|a]ss$/,
                use: [
                    "vue-style-loader",
                    "style-loader",
                    {
                        loader: "css-loader",
                        options: { importLoaders: 2, sourceMap: isDev },
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                            sourceMap: isDev,
                            config: {
                                path: path.resolve(__dirname, "./postcss.config.js"),
                            },
                        },
                    },
                    "resolve-url-loader",
                    "sass-loader",
                ],

            },
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                loader: "file-loader",
                options: {
                    name: "[hash].[ext]",
                    publicPath: "/static/build/img",
                    outputPath: "img",
                },
            },
            {
                test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
                loader: "file-loader",
                options: {
                    name: "[hash].[ext]",
                    publicPath: "/static/build/fonts",
                    outputPath: "fonts",
                },
            },
            {
                test: /\.svg/,
                use: {
                    loader: "svg-url-loader",
                    options: {},
                },
            },
        ],
    },
};

// No sourcemap for production
if (isDev) {
    const devToolPlugin = new webpack.SourceMapDevToolPlugin({
        filename: "[file].map",
    });

    config.plugins.push(devToolPlugin);
}

module.exports = config;