@iamota/iamota-webpack/iamota-webpack.parts.fonts.js

Helper tools for Webpack for iamota Framework (WordPress and Shopify)

// ----------------------------------------------------------------------------
// Webpack Font Config
// ----------------------------------------------------------------------------
//
// Webpack configuration to process fonts
//
// ----------------------------------------------------------------------------


/**
 * Initialize Config
 */
let config = {};
exports.init = function(config) {
    this.config = config;
    return this;
};


/**
 * Convert small font assets into inline strings, extract others to the fonts folder
 */
exports.inlineOrExtract = ({
    maxInlineSize  = (8 * 1024),
    outputFilename = 'fonts/[name][ext]',
} = {}) => ({
    module: {
        rules: [
            {
                // Inlines small font assets as a Base64 string
                test: /\.(woff|woff2|eot|ttf)$/i,
                type: 'asset',
                generator: {
                    filename: outputFilename
                },
                parser: {
                    dataUrlCondition: {
                        maxSize: maxInlineSize
                    }
                },
            }
        ],
    }
});


/**
 * Extract fonts to the fonts folder
 */
exports.extract = ({
    outputFilename = 'fonts/[name][ext]',
} = {}) => ({
    module: {
        rules: [
            {
                // Apply rule for font files
                test: /\.(woff|woff2|eot|ttf)$/i,
                use:  [
                    {
                        // File Loader copies used image files into the public font folder
                        loader: 'file-loader',
                        options: {
                            name: outputFilename,
                        }
                    }
                ]
            },
        ],
    }
});