.browserslistrc

[production]
> 0.25%
not dead
not op_mini all
not ie 11

[development]
last 1 chrome version
last 1 firefox version
last 1 opera version
last 1 safari version
last 1 edge version
last 1 ios version

babelrc.js

module.exports = {
    presets: [
        ['@babel/preset-env', {
            useBuiltIns: 'usage',
            corejs:      3,
            modules:     false
        }]
    ],
    plugins: [
        '@babel/plugin-proposal-class-properties',
        '@babel/plugin-proposal-private-methods',
        ['@babel/plugin-transform-react-jsx', {
            pragma:     'h',
            pragmaFrag: 'Fragment'
        }]
    ]
}

postcss.config.js

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

tsconfig.json

{
    "compilerOptions": {
        "jsx":                "preserve",
        "jsxFactory":         "h",
        "esModuleInterop":    true,
        "moduleResolution":   "node",
        "noImplicitAny":      false,
        "downlevelIteration": true,
        "target":             "ESNext",
        "module":             "ESNext"
    },
    "include": [
        "src"
    ],
    "exclude": [
        "node_modules"
    ]
}

webpack.config.js

const path                                = require('path')
const webpack                             = require('webpack')
const TerserPlugin                        = require('terser-webpack-plugin')
const MiniCssExtractPlugin                = require('mini-css-extract-plugin')
const OptimizeCssAssetsPlugin             = require('optimize-css-assets-webpack-plugin')
const { CleanWebpackPlugin }              = require('clean-webpack-plugin')
const { WebpackBundleSizeAnalyzerPlugin } = require('webpack-bundle-size-analyzer')
const FixStyleOnlyEntries                 = require('webpack-fix-style-only-entries')


/*
** loaders
*/

const linariaLoader = {
    loader: 'linaria/loader',
    options: {
        extension: '.styl',
        preprocessor(selector, cssText) {
            return `${ selector }${ cssText }`
        }
    }
}

module.exports = {
    entry: {
        app: path.resolve(__dirname, 'src', 'app', 'index.tsx')
    },
    output: {
        filename:      '[name].js',
        chunkFilename: '[chunkhash].module.js',
        path:          path.resolve(__dirname, 'dist', 'app'),
        publicPath:    '/dist/'
    },
    resolve: {
        extensions: [ '.tsx', '.ts', '.jsx', '.js' ],
        alias: {
            // preact
            'react':                'preact/compat',
            'react-dom/test-utils': 'preact/test-utils',
            'react-dom':            'preact/compat',
        }
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: [
                    'babel-loader',
                    linariaLoader,
                    'ts-loader'
                ]
            },
            {
                test: /\.jsx?$/,
                use: [
                    'babel-loader',
                    linariaLoader
                ]
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader'
                ]
            },
            {
                test: /\.styl$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'stylus-loader'
                ]
            }
        ]
    },
    plugins: [
        new WebpackBundleSizeAnalyzerPlugin('./bundle-analyzer.txt'),
        new CleanWebpackPlugin(),
        new FixStyleOnlyEntries({
            extensions: [ 'css', 'styl' ]
        }),
        new MiniCssExtractPlugin({
            filename:      '[name].css',
            chunkFilename: '[chunkhash].module.css',
            ignoreOrder:   false
        })
    ],
    stats: {
        children: false
    }
}