webpack.config.js

const path = require("path");
const webpack = require("webpack");
const HtmlWebPackPlugin = require("html-webpack-plugin");
const FaviconsWebpackPlugin = require("favicons-webpack-plugin");

module.exports = {
    entry: path.resolve(__dirname, "src/index.tsx"),
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].js",
        chunkFilename: "[name].chunk.js",
        publicPath: "/"
    },
    devtool: "source-map",
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".json"]
    },
    mode: "development",
    module: {
        rules: [
            {
                test: /\.(js|jsx|ts|tsx)$/,
                use: {
                    loader: "ts-loader"
                },
                exclude: /node_modules/,
                include: path.resolve("src")
            },

            {
                test: /\.mjs$/,
                include: /node_modules/,
                type: "javascript/auto"
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader",
                        options: { minimize: true }
                    }
                ]
            },
            {
                test: /\.s?css$/,
                use: [
                    "style-loader",
                    "css-loader",
                    {
                        loader: "sass-loader",
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            },
            {
                test: /\.(png|jpe?g|gif|ttf|woff|woff2|eot|svg|otf)$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name: "[path][name].[hash].[ext]"
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        // new FaviconsWebpackPlugin("./src/images/q.png"),
        new HtmlWebPackPlugin({
            inject: false,
            template: "./public/index.html",
            filename: "./index.html"
        }),
        new webpack.ProvidePlugin({
            Promise: "imports-loader?this=>global!exports-loader?global.Promise!es6-promise",
            fetch: "imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch",
            RSVP: "rsvp"
        }),
        new webpack.DefinePlugin({
            process: {
                env: {
                    BACKEND_URL: JSON.stringify(process.env.BACKEND_URL || "http://localhost:8092"),
                    MERCHANT_ID: JSON.stringify(process.env.MERCHANT_ID || "12002811"),
                    MERCHANT_TOKEN: JSON.stringify(process.env.MERCHANT_TOKEN || "j!6LE8f"),
                    PROFILE: JSON.stringify(process.env.PROFILE || "dev"),
                    VERSION: JSON.stringify(process.env.VERSION),
                    SENTRY_DSN: JSON.stringify(process.env.SENTRY_DSN || null)
                }
            }
        })
    ],
    resolve: {
        alias: {
            Utils: path.resolve(__dirname, "src/admin/utils"),
            Providers: path.resolve(__dirname, "src/providers"),
            Hooks: path.resolve(__dirname, "src/hooks"),
            Components: path.resolve(__dirname, "src/common/components"), // BETTER NAME FOR THIS
            GraphQLQueries: path.resolve(__dirname, "src/graphql/queries"),
            GraphQLMutations: path.resolve(__dirname, "src/graphql/mutations")
        }
    },
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        historyApiFallback: true
    }
};