zucchetti-sa5/webpack.config.js

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin")

module.exports = (env, argv) => {
    const devMode = argv.mode !== 'production'

    return {
        mode: devMode ? "development" : "production",
        entry: {
            bundle: path.resolve(__dirname, "src", "index.tsx")
        },
        output: {
            filename: devMode ? "[name].[contenthash:10].js" : "[name.js]",
            path: path.resolve(__dirname, "dist"),
            clean: true,
            publicPath: '/',
            sourceMapFilename: "[name].[contenthash:10].js.map"
        },
        devtool: "source-map",
        devServer: {
            historyApiFallback: true
        },
        module: {
            rules: [
                {
                    test: /\.tsx?/,
                    use: 'ts-loader',
                    exclude: /node_modules/
                },
                {
                    test: /\.jsx?$/,
                    include: path.resolve(__dirname, 'src'),
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                ['@babel/preset-env', { "targets": "defaults" }],
                                '@babel/preset-react'
                            ]
                        }
                    }
                },
                {
                    test: /\.(sa|sc|c)ss$/,
                    use: [
                        // Creates `style` nodes from JS strings
                        devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                        // Translates CSS into CommonJS
                        "css-loader",
                        // Compiles Sass to CSS
                        "sass-loader",
                    ],
                }
            ]
        },
        resolve: {
            extensions: [".tsx", ".ts", ".jsx", ".js"],
            alias: {
                "@mui/styles": path.resolve(__dirname, "node_modules", "@mui/styles"),
            },
            plugins: [new TsconfigPathsPlugin()]
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: path.join(__dirname, "src", "html", "template.html"),
                filename: "index.html",
                title: "React with Webpack",
            }),
        ].concat(devMode ? [] : [new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css'
        })])
    }
}