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 ManifestPlugin = require('./plugins/manifest')
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts')
const SvgSpritemapPlugin = require('svg-spritemap-webpack-plugin')
const path = require('path')
const glob = require('glob')

/**
 *  function generate config for webpack 
 *  
 *  @author Björn Hase <me@herr-hase.wtf>
 *  @license http://opensource.org/licenses/MIT The MIT License
 *  @link https://git.node001.net/tiny-components/webpack.git
 *
 */
module.exports = function tinyComponentsWebpack(files, options = {}) {

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

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

        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 }),
                safelist: defaults.purge.safelist
            }),
            new ManifestPlugin({
                filename: 'assets-manifest.json',
                context: defaults.context
            })
        ],
    }

    // if rules exists add 
    if (defaults.rules) {
        defaults.rules.forEach((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
}