webpack.customizations.js

/**
 * Webpack Theme Customization file.
 *
 * Theme developers can make changes to the options, entry points, and paths listed in this file in order to modify the webpack config to load new assets from node packages or to add new stylesheets to be compiled by webpack.
 */

/**
 * SASS includePaths
 *
 * This array specifies the includePaths for Dart Sass to reference in order to find and load SASS partials from node_modules packages.
 * New paths can be added to this array in this file and will be added as paths that Dart Sass checks to find SASS partials for @import instances.
 */
const customIncludePaths = [
	'./node_modules/normalize-scss/sass',
	'./node_modules/mathsass/dist/',
	'./node_modules/@bostonuniversity',
];

// Example below is for block styles.
// This concats all of the block base styles together so we have the option
// of either enqueuing individual block styles per block or all of them together.
// Block Common Styles are those shared between blocks (such as a title, label, or button class)
// Any other non-block block editor features such as a sidebar plugin can have an entry point and stylesheet.
const blockEntryPoints = {
	'css/blocks/blocks-decorative': './src/blocks/blocks-decorative.scss', // All decorative styles for blocks
	'css/blocks/blocks-bundled': './src/blocks/blocks-bundled.scss', // All individual block base styles combined in one stylesheet.
	'css/blocks/blocks-common': './src/blocks/blocks-common.scss', // Common shared styles for these blocks.
};

/**
 * Plugin Entry Points
 *
 * This creates an entry point and stylesheet if this project is a plugin and has non-block features that need styles (templates, shortcodes, etc). It should not contain any block styles.
 *
 * Format: 'name': 'path-to-file'
 *
 * The name can contain a path to control the output location of the file within the output directory.
 *
 * Example: 'css/admin/adminstyle': './css/admin.scss',
 * In this example the admin.scss file will be compiled as a file named `adminstyle.css` in the /build/css/admin folder path.
 */
const pluginEntryPoints = {
	// Styles
	'css/plugin': './src/scss/plugin.scss', // A stylesheet for the plugin.
	'css/admin': './src/scss/admin.scss', // A stylesheet for admin only styles.
	'css/editor-styles': './src/scss/editor-styles.scss', // A stylesheet for editor only styles.
	'css/block-editor': './src/scss/block-editor.scss', // A stylesheet for block editor only styles.
	'css/classic-editor': './src/scss/classic-editor.scss', // A stylesheet for block editor only styles.
	// Scripts
	'js/plugin': './src/js/plugin.js', // Front-end scripts.
	'js/admin': './src/js/admin.js', // Admin only scripts.
	'js/block-editor': './src/js/block-editor.js', // Block editor only scripts.
	'js/classic-editor': './src/js/classic-editor.js', // Block editor only scripts.
	'js/variations': './src/blocks/_variations/index.js',
};

/**
 * Set SASS compiler to use the faster embedded version. Default is `sass`. `sass-embedded` appears to be faster on MacOS. This can be changed back to `sass` if it causes issues.
 */
const sassCompiler = 'sass-embedded';

/**
 * Set sassOptions.
 */
const customSassOptions = {
	includePaths: customIncludePaths, // Adding our custom include paths.
	// outputStyle: 'compressed', // Determines the output format of the final CSS style.
	quietDeps: true, // If this option is set to true, Sass won’t print warnings that are caused by dependencies.
	silenceDeprecations: [
		'legacy-js-api',
		'global-builtin',
		'import',
		'slash-div',
		'color-functions',
		'color-4-api',
	],
};

/**
 * The stats option lets you precisely control what bundle information gets displayed. This can be a nice middle ground if you don't want to use quiet or noInfo because you want some bundle information, but not all of it.
 *
 * It is defined as a const here so it can be used for both blocksConfig and themeConfig, but if you'd like to use a different setup for each, you can define them inside the individual config objects.
 *
 * @see https://webpack.js.org/configuration/stats/
 */
const statsConfig = {
	preset: 'verbose', // Output everything.
	// Settings below will modify the preset output.
	errors: true, // Show errors.
	warnings: false, // Hide warnings.
	colors: true, // Use colors for better readability.
	modules: false, // Hide module details.
	chunks: false, // Hide chunk details.
	chunkGroups: false,
	assets: false, // Hide "assets by path" details.
	entrypoints: true, // Hide the entry points with the corresponding bundles.
	logging: 'none',
	publicPath: false,
	// @todo these are all ignored? the stack trace is too damn long and clutters the build
	errorsSpace: 5,
	errorStack: false,
	errorDetails: false,
	warningsSpace: 5,
	reasonsSpace: 5,
	nestedModulesSpace: 5,
	modulesSpace: 5,
	chunkModulesSpace: 5,
	assetsSpace: 5,
};

/**
 * Export these so webpack.config.js can consume it.
 */
module.exports = {
	blockEntryPoints,
	pluginEntryPoints,
	sassCompiler,
	statsConfig,
	customSassOptions,
};