Basic Webpack Setup (SASS + Babel)

webpack.config.js

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const fg = require('fast-glob')

module.exports = async (env, argv) => {
    const entries = await fg([
        'src/js/*.js',
        'src/scss/*.scss',
    ])

    const dynamicEntry = entries.reduce((acc, entry) => {
        const absolute = path.resolve(__dirname, entry)
        const name = path.parse(absolute).name
        return { ...acc, [name]: absolute }
    }, {})

    return {
        entry: dynamicEntry,

        output: {
            filename: '[name].js',
            path: path.resolve(__dirname, 'assets', 'dist'),
            publicPath: '/dist/'
        },

        module: {
            rules: [
                {
                    test: /\.(sa|sc|c)ss$/,
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                            options: { publicPath: 'assets/styles' }
                        },
                        {
                            loader: 'css-loader',
                            options: {
                                sourceMap: true,
                                importLoaders: 2,
                                url: false
                            }
                        },
                        {
                            loader: 'sass-loader',
                            options: { 
                                sourceMap: true,
                                implementation: require("sass")
                            }
                        }
                
                    ]
                },
                {
                    test: /\.(png|svg|jpg|gif)$/,
                    use: ['file-loader']
                },
                {
                    test: /\.m?js$/,
                    exclude: /(node_modules|bower_components)/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env']
                        }
                    }
                },
            ]
        },

        plugins: [
            new MiniCssExtractPlugin({
                filename: "[name].css",
            }),
            new CleanWebpackPlugin({
                cleanOnceBeforeBuildPatterns: ['assets/dist']
            }),
            new FriendlyErrorsWebpackPlugin(),
        ],

        optimization: {
            splitChunks: {
                chunks: 'all'
            },
            minimizer: [new UglifyJsPlugin()]
        },
        
        performance: {
            maxEntrypointSize: 400000
        },

        watchOptions: {
            ignored: ['node_modules']
        },
    }
}