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

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");

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.ts"),
        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.ts")
    ],
    mode: "development",
    devtool: "source-map",
    output: {
        path: path.resolve(appDirectory, "dist"),
        filename: "bundle.web.js",
        publicPath: "/"
    },
    devServer: {
        port: 3000,
        historyApiFallback: true,
        client: {
            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 HtmlWebpackPlugin({
            template: path.resolve(appDirectory, "./public/index.html"),
            filename: "index.html"
        }),
        new webpack.DefinePlugin({
            __DEV__: JSON.stringify(process.env.NODE_ENV !== "production"),

            "process.env": JSON.stringify({}),
            "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV || "development")
        })
    ],
    resolve: {
        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"
        ]
    }
};