food-site/webpack-dev.config.js

const path = require('path');

const TerserPlugin = require("terser-webpack-plugin");
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: "production",
    cache: false,
    entry: './src/main.tsx',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/',
    },
    stats: {
        colors: true,
        timings: true,
    },
    performance: {
        hints: false,
    },
    devtool: "eval-source-map",
    plugins: [
        new HtmlWebpackPlugin({
            title: "Chaos's Food Likes/Dislikes",
            aseUrl: './',
            meta: {
                'og:title': { property: 'og:title', content: "Chaos's Food Likes/Dislikes" },
                'og:description': { property: 'og:description', content: "A list for all the foods we like, dislike and find ourselves unable to eat due to sensory difficulties." },
            },
        })
    ],
    devServer: {
        historyApiFallback: true,
    },
    resolve: {
        modules: ['node_modules'],
        extensions: ['.tsx', '.ts', '.js', ".mjs"],
        alias: { os: false }
    },

    module: {
        rules: [
            {
                test: /\.(scss)$/,
                use: [{
                    loader: 'style-loader',
                }, {
                    loader: 'css-loader',
                }, {
                    loader: 'postcss-loader',
                    options: {
                        postcssOptions: {
                            options: function () {
                                return [
                                    require('precss'),
                                    require('autoprefixer')
                                ];
                            }
                        }
                    }
                }, {
                    loader: 'sass-loader'
                }]
            },
            {
                test: /\.ts(x?)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'ts-loader'
                    }
                ]
            },
        ],
    },

    optimization: {
        minimize: false,
        minimizer: [
        ],
    },
};