webpack/index.js

const webpack = require('webpack')
const TerserPlugin = require('terser-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const { PurgeCSSPlugin } = require('purgecss-webpack-plugin')
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts')
const SvgSpritemapPlugin = require('svg-spritemap-webpack-plugin')
const path = require('path')
const glob = require('glob')

module.exports = function tinyComponentsWebpack(files, options = {}) {

    // merge options with defaults
    const defaults = Object.assign({
        destination: path.resolve(process.cwd(), 'public'),
        purge: {
            src: path.join(__dirname, 'js')
        }
    }, options)

    const config = {  
        entry: files,
        output: {  
            path: defaults.destination,  
            filename: 'js/[name].js',  
        },

        resolve: {
            modules: ['node_modules'],
        },

        optimization: {
            removeEmptyChunks: true,
            minimize: true,
            minimizer: [
                new TerserPlugin({ 
                    terserOptions: {
                        output: {
                            comments: false,
                        },
                    },
                    extractComments: false
                })
            ]
        },

        module: {
            rules: [{
                test: /\.(css|scss)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: { url: false }
                    },
                    'sass-loader'
                ]
            },{
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                type: 'asset/resource',
                generator: {
                    filename: "fonts/[name].[ext]",
                }
            }]
        },

        plugins: [
            new RemoveEmptyScriptsPlugin(),
            new MiniCssExtractPlugin({
                filename: 'css/[name].css',
            }),
            new PurgeCSSPlugin({
                paths: glob.sync(`${defaults.purge.src}/**/*`, { nodir: true })
            }),
        ],
    }

    // if rules exists add 
    if (defaults.rules) {
        defaults.rules.each((rule) => {
            config.module.rules.push(rule)
        })
    }

    // adding svg src 
    if (defaults.svg.src) {
        config.plugins.push(new SvgSpritemapPlugin(defaults.svg.src, {
            output: {
                filename: 'symbol-defs.svg',
                chunk: {
                    keep: true
                },
                svgo: {
                    plugins: [{
                        name: 'convertStyleToAttrs',
                        active: true
                    },{
                        name: 'removeStyleElement',
                        active: true
                    }, {
                        name: 'removeAttrs',
                        params: {
                            attrs: 'fill'
                        }
                    }]
                }
            },
            sprite: {
                prefix: 'icon-'
            }
        }))
    }

    return config
}