webpack.client.config.js

const path = require("path");
const CopyPlugin = require("copy-webpack-plugin");
const webpack = require("webpack");
const config = require("./config/default");
const autoprefixer = require("autoprefixer");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const filename = (ext) => `[name].[hash].${ext}`;

module.exports = {
    mode: "production",
    //devtool: "source-map",
    entry: "./src/index.tsx",
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [{ loader: MiniCssExtractPlugin.loader }, "css-loader", "postcss-loader"],
                exclude: /node_modules/,
            },
            {
                test: /\.scss$/,
                use: [
                    { loader: MiniCssExtractPlugin.loader },
                    {
                        loader: "css-loader",
                        options: {
                            modules: {
                                localIdentName: "[hash:base64:5]",
                            },
                        },
                    },
                    {
                        loader: "postcss-loader",
                    },
                    { loader: "sass-loader" },
                ],
                exclude: /node_modules/,
            },
            {
                test: /\.tsx?$/,
                use: "ts-loader",
                exclude: /node_modules/,
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                type: "asset/resource",
                generator: {
                    // Generator options for asset modules
                    // Emit an output asset from this asset module. This can be set to 'false' to omit emitting e. g. for SSR.
                    // type: boolean
                    emit: true,

                    filename: "[name][ext]",

                    // // Customize publicPath for asset modules, available since webpack 5.28.0
                    // // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
                    publicPath: "images/",

                    // Emit the asset in the specified folder relative to 'output.path', available since webpack 5.67.0
                    // type: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
                    outputPath: "images/",
                },
            },
        ],
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js", ".css"],
        alias: {
            scichart: path.resolve(__dirname, "./node_modules/scichart"),
            "scichart-addons": path.resolve(__dirname, "../Addons"),
        },
    },
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, config.buildConfig.targetDir),
    },
    // performance: {
    //     maxAssetSize: 2000000, // Sets the maximum individual asset size to 2MB (in bytes)
    //     maxEntrypointSize: 2000000, // Sets the maximum entry point size to 2MB (in bytes)
    // },
    plugins: [
        new CopyPlugin({
            patterns: [
                { from: "src/static/favicon.ico", to: "" },
                { from: "src/static/webgl-intel.html", to: "" },
                { from: "src/components/Examples/FeaturedApps/ShowCases/OilAndGasDashboard/Data/Shale.csv", to: "" },
                { from: "src/components/Examples/FeaturedApps/ShowCases/OilAndGasDashboard/Data/Density.csv", to: "" },
                {
                    from: "src/components/Examples/FeaturedApps/ShowCases/OilAndGasDashboard/Data/Resistivity.csv",
                    to: "",
                },
                {
                    from: "src/components/Examples/FeaturedApps/ShowCases/OilAndGasDashboard/Data/PoreSpace.csv",
                    to: "",
                },
                { from: "src/components/Examples/FeaturedApps/ShowCases/OilAndGasDashboard/Data/Sonic.csv", to: "" },
                { from: "src/components/Examples/FeaturedApps/ShowCases/OilAndGasDashboard/Data/Texture.csv", to: "" },
                {
                    from: "src/components/Examples/Charts2D/PolarCharts/PolarUniformHeatmapUltrasound/heatmap_data.csv",
                    to: "",
                },
                { from: "src/server/vanillaDemo/common.js", to: "" },
                { from: "node_modules/scichart/_wasm/scichart.browser.mjs", to: "" },
                { from: "node_modules/scichart/_wasm/scichart2d.wasm", to: "" },
                { from: "node_modules/scichart/_wasm/scichart3d.wasm", to: "" },
                { from: "sitemap.xml", to: "" },
                { from: process.env.NOINDEX ? "robotsNoIndex.txt" : "robots.txt", to: "robots.txt" },
                { from: "src/server/Data/geojson/australia.json", to: "" },
                { from: "src/server/Data/geojson/africa.json", to: "" },
                { from: "src/server/Data/geojson/australia.json", to: "" },
                { from: "src/server/Data/geojson/africa.json", to: "" },
                { from: "src/server/Data/geojson/world.json", to: "" },
                { from: "src/server/Data/geojson/usaStates.json", to: "" },
                { from: "src/server/Data/geoJsonConverted/australiaConverted.json", to: "" },
                { from: "src/server/Data/geoJsonConverted/africaConverted.json", to: "" },
                { from: "src/server/Data/geoJsonConverted/worldConverted.json", to: "" },
                { from: "src/server/Data/geoJsonConverted/europeConverted.json", to: "" },
                { from: "src/server/Data/orderBook/LTCUSDT_OHLC.csv", to: "" },
                { from: "src/server/Data/orderBook/orderbook_levels.csv", to: "" },
                { from: "src/server/Data/earthquakes/earthquakes-23k.csv", to: "" },
            ],
        }),
        // new BundleAnalyzerPlugin(),
        new MiniCssExtractPlugin({
            // these duplicate style.css extracted in server build
            filename: "stylesClientBundle.css",
        }),
        require("autoprefixer"),
    ],
};