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(__dirname, 'public'), purge: { src: path.join(__dirname, 'js') } }, options) const config = { entry: files, output: { path: defaults.destination, filename: 'js/[name].js', }, optimization: { removeEmptyChunks: true, minimize: true, minimizer: [ new TerserPlugin({ terserOptions: { output: { comments: false, }, }, extractComments: false }) ] }, module: { rules: [{ test: /\.scss$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader' ] }] }, 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 }