webpack-circular-dependency

webpack.config.js

// npm i -D source-map-loader webpack-cli circular-dependency-plugin babel-loader css-loader sass-loader @babel/preset-env @babel/preset-react
// npx webpack --config=~webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = async (options) => ({
    entry: {
        app: `${__dirname}/src/index.js`,
    },
    output: {
        path: `${__dirname}/dist`,
        filename: '[name].js',
    },
    mode: 'development',
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.js$/,
                enforce: 'pre',
                use: 'source-map-loader',
            },
            // {
            //     test: /\.tsx?$/,
            //     exclude: /node_modules/,
            //     use: {
            //         loader: 'ts-loader',
            //         options: { transpileOnly: true },
            //     }
            // },
            // {
            //     test: /\.tsx?$/,
            //     exclude: /node_modules/,
            //     use: {
            //         loader: 'swc-loader',
            //         options: require(`${__dirname}/.swcrc`),
            //     }
            // },
            {
                test: /\.html$/,
                use: [
                    { loader: 'html-loader', options: { minimize: false } },
                ],
            },
            {
                test: /\.m?jsx?$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                        '@babel/preset-env',
                        "@babel/preset-react",
                        ]
                    }
                }
            },
            {
                test: /\.css$/i,
                use: [
                    { loader: 'css-loader' },
                ],
            },
                {
                    test: /\.scss$/,
                    use: (() => {
                        let result = [
                            { loader: 'css-loader', options: { } },
                            { loader: 'sass-loader', options: { } }
                        ];
                        return result;
                    })(),
                },
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
    },
    devServer: {
        contentBase: `${__dirname}/dist`,
    },
    plugins: [
        new (require('circular-dependency-plugin'))({
            exclude: /node_modules/,
            failOnError: true,
        }),
        new HtmlWebpackPlugin({
            // template: `${__dirname}/examples/index.html`,
            filename: 'index.html',
        }),
    ]
});