Centralize and Automate Plugin Asset Minification in Webpack

[ShyamGadde]

Currently, each plugin handles JavaScript and CSS minification through individual Webpack configurations. This approach requires manual updates to CopyWebpackPlugin patterns whenever new assets are added or renamed, creating unnecessary maintenance overhead.

For example, introducing a new JavaScript file currently requires updating the CopyWebpackPlugin patterns in the relevant plugin's configuration by adding the following:

{
    from: `${ pluginDir }/file-name.js`,
    to: `${ pluginDir }/file-name.min.js`,
}

To streamline this process, we could introduce a generalized Webpack configuration that:

• Automatically detects and minifies JavaScript and CSS files across plugin directories.
• Excludes unnecessary files, such as those in the build directory (typically library files copied from node_modules) and already-minified assets.
• Eliminates the need for manual configuration updates when adding or renaming assets.

Below is a potential Webpack configuration:

/**
 * Webpack Config: Minify Plugin Assets
 *
 * @return {Object} Webpack configuration
 */
const minifyPluginAssets = () => {
    return {
        ...sharedConfig,
        name: "minify-plugin-assets",
        plugins: [
            new CopyWebpackPlugin( {
                patterns: [
                    {
                        from: `plugins/**/*.js`,
                        to: ( { absoluteFilename } ) =>
                            absoluteFilename.replace( /\.js$/, ".min.js" ),
                        // Exclude already-minified files and those in the build directory
                        globOptions: {
                            ignore: [ "**/build/**", "**/*.min.js" ],
                        },
                    },
                    {
                        from: `plugins/**/*.css`,
                        to: ( { absoluteFilename } ) =>
                            absoluteFilename.replace( /\.css$/, ".min.css" ),
                        transform: {
                            transformer: cssMinifyTransformer,
                            cache: false,
                        },
                        globOptions: {
                            ignore: [ "**/build/**", "**/*.min.css" ],
                        },
                    },
                ],
            } ),
            new WebpackBar( {
                name: "Minifying Plugin Assets",
                color: "#2196f3",
            } ),
        ],
    };
};

Benefits:

• Unifies asset handling across plugins.
• Reduces configuration duplication for plugins like Performance Lab, Embed Optimizer, and Image Prioritizer, where Webpack configs exist solely for asset minification.

Note: The configuration could be further refined to target assets only for the specific plugin being built during production builds if needed.