ncore-ui-kit/example/web/webpack.config.js

/* eslint-disable */

const HtmlWebpackPlugin = require("html-webpack-plugin");
const ESLintPlugin = require("eslint-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const webpack = require("webpack");
const path = require("path");

const appDirectory = path.resolve(__dirname, "./");
const srcDirectory = path.resolve(__dirname, "../src");
const rootDirectory = path.resolve(__dirname, "../../");

const babelLoaderConfiguration = {
    test: /\.(tsx|ts|js|jsx)$/,
    include: [
        path.resolve(appDirectory, "index.tsx"),
        path.resolve(srcDirectory, "index.tsx"),
        path.resolve(srcDirectory),

        path.resolve(rootDirectory, "src"),

        path.resolve(rootDirectory, "node_modules/@react-navigation/native-stack"),
        path.resolve(rootDirectory, "node_modules/@react-native/new-app-screen"),
        path.resolve(rootDirectory, "node_modules/@react-navigation/elements"),
        path.resolve(rootDirectory, "node_modules/@react-navigation/native"),
        path.resolve(rootDirectory, "node_modules/react-native-uncompiled"),
        path.resolve(rootDirectory, "node_modules/lucide-react-native"),
        path.resolve(rootDirectory, "node_modules/react-native"),

        path.resolve(rootDirectory, "node_modules/expo-font"),
        path.resolve(rootDirectory, "node_modules/expo-modules-core"),
        path.resolve(rootDirectory, "node_modules/expo-asset")
    ],
    use: {
        loader: "babel-loader",
        options: {
            cacheDirectory: true,
            presets: [
                "module:@react-native/babel-preset",
                "@babel/preset-typescript"
            ],
            plugins: [
                "react-native-web"
            ]
        }
    }
};

const imageLoaderConfiguration = {
    test: /\.(gif|jpe?g|png|svg)$/,
    use: {
        loader: "url-loader",
        options: {
            name: "[name].[ext]",
            esModule: false
        }
    }
};

module.exports = {
    entry: [
        path.resolve(appDirectory, "index.tsx")
    ],
    mode: "development",
    devtool: "source-map",
    output: {
        path: path.resolve(appDirectory, "dist"),
        filename: "bundle.web.js",
        publicPath: "/"
    },
    devServer: {
        port: 3000,
        historyApiFallback: true,
        client: {
            logging: "none",
            overlay: {
                errors: true,
                warnings: false
            }
        }
    },
    ignoreWarnings: [
        {
            module: /lucide-react-native/
        },
        {
            module: /@react-navigation/
        },
        {
            module: /ncore-ui-kit/
        }
    ],
    module: {
        rules: [
            babelLoaderConfiguration,
            imageLoaderConfiguration,
            {
                test: /\.(js|mjs|jsx)$/,
                include: [
                    path.resolve(rootDirectory, "node_modules/@react-navigation")
                ],
                type: "javascript/auto",
                resolve: {
                    fullySpecified: false
                }
            },
            {
                test: /\.mjs$/,
                include: /node_modules/,
                type: "javascript/auto"
            },
            {
                test: /\.(ttf|otf|eot|woff|woff2)$/,
                type: "asset/resource",
                generator: {
                    filename: "../src/assets/fonts/[name][ext]"
                }
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            process: "process/browser",
            Buffer: ["buffer", "Buffer"],
        }),
        new HtmlWebpackPlugin({
            template: path.resolve(appDirectory, "./public/index.html"),
            filename: "index.html"
        }),
        new webpack.DefinePlugin({
            "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV || "development"),
            __DEV__: JSON.stringify(process.env.NODE_ENV !== "production"),
            "__REACT_DEVTOOLS_GLOBAL_HOOK__": "({ isDisabled: true })",
            "process.env.EXPO_OS": JSON.stringify("web"),
            "process.env": JSON.stringify({})
        }),
        new ESLintPlugin({
            overrideConfigFile: path.resolve(rootDirectory, "eslint.config.mjs"),
            failOnError: process.env.NODE_ENV === "production",
            exclude: [
                path.resolve(rootDirectory, "node_modules"),
                path.resolve(appDirectory, "dist")
            ],
            eslintPath: "eslint/use-at-your-own-risk",
            configType: "flat",
            emitWarning: true,
            extensions: [
                "tsx",
                "jsx",
                "ts",
                "js"
            ]
        }),
        new CopyPlugin({
            patterns: [
                {
                    globOptions: {
                        dot: true,
                        ignore: [
                            "**/index.html"
                        ]
                    },
                    noErrorOnMissing: true,
                    from: "public",
                    to: "."
                }
            ]
        })
    ],
    resolve: {
        fallback: {
            "crypto": require.resolve("crypto-browserify"),
            "stream": require.resolve("stream-browserify"),
            "process": require.resolve("process/browser"),
            "vm": require.resolve("vm-browserify"),
            "buffer": require.resolve("buffer/"),
            "util": require.resolve("util/")
        },
        symlinks: false,
        alias: {
            "react-native$": "react-native-web",
            "ncore-ui-kit": path.resolve(rootDirectory, "src/index")
        },
        extensions: [
            ".web.tsx",
            ".web.ts",
            ".web.js",
            ".tsx",
            ".ts",
            ".js",
            ".mjs"
        ],
        modules: [
            path.resolve(rootDirectory, "node_modules"),
            "node_modules"
        ]
    }
};