ncore-ui-kit/webpack-config.js

/* eslint-disable @typescript-eslint/no-require-imports */
const path = require("path");

function withNCoreUIKitWebpack(config, webpack) {
    if(!config.resolve) {
        config.resolve = {};
    }

    if(!config.resolve.fallback) {
        config.resolve.fallback = {};
    }

    config.resolve.fallback = {
        ...config.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/")
    };

    if(!config.resolve.alias) {
        config.resolve.alias = {};
    }

    config.resolve.alias = {
        ...config.resolve.alias,
        "react-native$": "react-native-web"
    };

    if(!config.resolve.extensions) {
        config.resolve.extensions = [];
    }

    const webExtensions = [
        ".web.tsx",
        ".web.ts",
        ".web.js",
        ".tsx",
        ".ts",
        ".js",
        ".mjs"
    ];

    webExtensions.forEach(ext => {
        if(!config.resolve.extensions.includes(ext)) {
            config.resolve.extensions.push(ext);
        }
    });

    if(!config.plugins) {
        config.plugins = [];
    }

    if(webpack) {
        config.plugins.push(
            new webpack.ProvidePlugin({
                process: "process/browser",
                Buffer: [
                    "buffer",
                    "Buffer"
                ]
            })
        );
    }

    return config;
}

function createDefaultWebpackConfig({
    HtmlWebpackPlugin,
    appDirectory,
    ESLintPlugin,
    CopyPlugin,
    webpack
}) {
    const babelLoaderConfiguration = {
        use: {
            options: {
                presets: [
                    "module:@react-native/babel-preset",
                    "@babel/preset-typescript"
                ],
                plugins: [
                    "react-native-web"
                ],
                cacheDirectory: true
            },
            loader: "babel-loader"
        },
        include: [
            path.resolve(appDirectory, "index.tsx"),
            path.resolve(appDirectory, "src")
        ],
        test: /\.(tsx|ts|js|jsx)$/
    };

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

    let config = {
        plugins: [
            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({})
            })
        ],
        module: {
            rules: [
                babelLoaderConfiguration,
                imageLoaderConfiguration,
                {
                    include: /node_modules\/@react-navigation/,
                    resolve: {
                        fullySpecified: false
                    },
                    test: /\.(js|mjs|jsx)$/,
                    type: "javascript/auto"
                },
                {
                    include: /node_modules/,
                    type: "javascript/auto",
                    test: /\.mjs$/
                },
                {
                    generator: {
                        filename: "assets/fonts/[name][ext]"
                    },
                    test: /\.(ttf|otf|eot|woff|woff2)$/,
                    type: "asset/resource"
                }
            ]
        },
        resolve: {
            modules: [
                path.resolve(appDirectory, "node_modules"),
                "node_modules"
            ],
            symlinks: false
        },
        output: {
            path: path.resolve(appDirectory, "dist"),
            filename: "bundle.web.js",
            publicPath: "/"
        },
        entry: [
            path.resolve(appDirectory, "index.tsx")
        ],
        ignoreWarnings: [
            {
                module: /lucide-react-native/
            },
            {
                module: /@react-navigation/
            },
            {
                module: /ncore-ui-kit/
            }
        ],
        devServer: {
            historyApiFallback: true,
            client: {
                overlay: {
                    warnings: false,
                    errors: true
                },
                logging: "none"
            },
            port: 3000
        },
        devtool: "source-map",
        mode: "development"
    };

    if(HtmlWebpackPlugin) {
        config.plugins.push(
            new HtmlWebpackPlugin({
                template: path.resolve(appDirectory, "./public/index.html"),
                filename: "index.html"
            })
        );
    }

    if(ESLintPlugin) {
        config.plugins.push(
            new ESLintPlugin({
                overrideConfigFile: path.resolve(appDirectory, "eslint.config.mjs"),
                failOnError: process.env.NODE_ENV === "production",
                exclude: [
                    path.resolve(appDirectory, "node_modules"),
                    path.resolve(appDirectory, "dist")
                ],
                eslintPath: "eslint/use-at-your-own-risk",
                configType: "flat",
                emitWarning: true,
                extensions: [
                    "tsx",
                    "jsx",
                    "ts",
                    "js"
                ]
            })
        );
    }

    if(CopyPlugin) {
        config.plugins.push(
            new CopyPlugin({
                patterns: [
                    {
                        globOptions: {
                            ignore: [
                                "**/index.html"
                            ],
                            dot: true
                        },
                        noErrorOnMissing: true,
                        from: "public",
                        to: "."
                    }
                ]
            })
        );
    }

    config = withNCoreUIKitWebpack(config, webpack);

    return config;
}

module.exports = {
    createDefaultWebpackConfig,
    withNCoreUIKitWebpack
};