webpack.config.js

const HtmlWebPackPlugin = require(`html-webpack-plugin`)
const MiniCssExtractPlugin = require(`mini-css-extract-plugin`)

module.exports = {
    entry: `./src/index.tsx`,
    devtool: `source-map`,
    resolve: {
        extensions: [`.ts`, `.tsx`, `.js`, `.json`],
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: `awesome-typescript-loader`,
            },
            {
                enforce: `pre`,
                test: /\.js$/,
                loader: `source-map-loader`,
            },
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: `babel-loader`,
            },
            {
                test: /\.scss$/,
                use: [
                    process.env.NODE_ENV !== `production` ? `style-loader` : MiniCssExtractPlugin.loader,
                    `css-loader`,
                    `sass-loader`,
                ],
            },
            {
                test: /\.html$/,
                loader: `html-loader`,
            },
        ],
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: `./public/index.html`,
            filename: `./index.html`,
        }),
        new MiniCssExtractPlugin({
            filename: `[name].css`,
            chunkFilename: `[id].css`,
        }),
    ],
}