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 rootDirectory = path.resolve(__dirname, "../../");

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

        path.resolve(rootDirectory, "src"),

        path.resolve(appDirectory, "node_modules/@react-navigation/native-stack"),
        path.resolve(appDirectory, "node_modules/@react-native/new-app-screen"),
        path.resolve(appDirectory, "node_modules/@react-navigation/elements"),
        path.resolve(appDirectory, "node_modules/@react-navigation/native"),
        path.resolve(appDirectory, "node_modules/react-native-uncompiled"),
        path.resolve(appDirectory, "node_modules/lucide-react-native"),
        path.resolve(appDirectory, "node_modules/react-native")
    ],
    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.js")
    ],
    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-mobile/
        }
    ],
    module: {
        rules: [
            babelLoaderConfiguration,
            imageLoaderConfiguration,
            {
                test: /\.(js|mjs|jsx)$/,
                include: [
                    path.resolve(appDirectory, "node_modules/@react-navigation")
                ],
                type: "javascript/auto",
                resolve: {
                    fullySpecified: false
                }
            },
            {
                test: /\.mjs$/,
                include: /node_modules/,
                type: "javascript/auto"
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(appDirectory, "./public/index.html"),
            filename: "index.html"
        }),
        new webpack.DefinePlugin({
            __DEV__: JSON.stringify(process.env.NODE_ENV !== "production"),
        })
    ],
    resolve: {
        alias: {
            "react-native$": "react-native-web",
            "ncore-ui-kit-mobile": path.resolve(rootDirectory, "src/index")
        },
        extensions: [
            ".web.tsx",
            ".web.ts",
            ".web.js",
            ".tsx",
            ".ts",
            ".js",
            ".mjs"
        ],
        modules: [
            path.resolve(appDirectory, "node_modules"),
            path.resolve(rootDirectory, "node_modules"),
            "node_modules"
        ]
    }
};