How to use @automattic/calypso-build - 10 common examples

const source = argv.source;
	const sourceSegments = source.split( path.sep );
	const packageName = sourceSegments[ 0 ];
	const scriptName =
		sourceSegments.length > 1 ? sourceSegments.slice( 1 ).join( path.sep ) : source;

	// object provides ability to name the entry point
	// which enables dynamic file names
	const entry = {
		[ scriptName ]: path.join( __dirname, 'full-site-editing-plugin', source ),
	};

	const outputPath = path.join( __dirname, 'full-site-editing-plugin', packageName, 'dist' );

	const webpackConfig = getBaseWebpackConfig( env, argv );

	return {
		...webpackConfig,
		entry,
		output: {
			...webpackConfig.output,
			path: outputPath,
			filename: '[name].js', // dynamic filename
		},
		watch: isDevelopment,
		devtool: isDevelopment ? 'inline-cheap-source-map' : false,
		stats: 'minimal',
	};
}

entry: {
			editor: editorScript,
			'editor-experimental': editorExperimentalScript,
			'editor-beta': editorBetaScript,
			...viewBlocksScripts,
		},
		'output-chunk-filename': '[name].[chunkhash].js',
		'output-path': path.join( __dirname, '_inc', 'blocks' ),
	}
);

const transpileConfig = extensionsWebpackConfig.module.rules.find( rule =>
	rule.use.some( loader => loader.options.presets )
);

const componentsWebpackConfig = getBaseWebpackConfig(
	{ WP: false },
	{
		entry: {
			components: path.join( __dirname, './extensions/shared/components/index.jsx' ),
		},
		'output-chunk-filename': '[name].[chunkhash].js',
		'output-library-target': 'commonjs2',
		'output-path': path.join( __dirname, '_inc', 'blocks' ),
		'output-pathinfo': true,
	}
);

// We export two configuration files: One for admin.js, and one for components.jsx.
// The latter produces pre-rendered components HTML.
module.exports = [
	{

/**
 * External dependencies
 */
const getBaseWebpackConfig = require( '@automattic/calypso-build/webpack.config.js' );
const path = require( 'path' );

const isDevelopment = process.env.NODE_ENV !== 'production';

const baseWebpackConfig = getBaseWebpackConfig(
	{ WP: false },
	{
		entry: {}, // We'll override later
		'output-filename': '[name].js',
		'output-path': path.join( __dirname, '_inc', 'build' ),
	}
);

const sharedWebpackConfig = {
	...baseWebpackConfig,
	resolve: {
		...baseWebpackConfig.resolve,
		modules: [ path.resolve( __dirname, '_inc/client' ), 'node_modules' ],
	},
	node: {
		fs: 'empty',

...blockScripts( 'editor', path.join( __dirname, 'extensions' ), presetProductionBlocks ),
];

// Combines all the different Experimental blocks into one editor.js script
const editorExperimentalScript = [
	editorSetup,
	...blockScripts( 'editor', path.join( __dirname, 'extensions' ), presetExperimentalBlocks ),
];

// Combines all the different blocks into one editor-beta.js script
const editorBetaScript = [
	editorSetup,
	...blockScripts( 'editor', path.join( __dirname, 'extensions' ), presetBetaBlocks ),
];

const extensionsWebpackConfig = getBaseWebpackConfig(
	{ WP: true },
	{
		entry: {
			editor: editorScript,
			'editor-experimental': editorExperimentalScript,
			'editor-beta': editorBetaScript,
			...viewBlocksScripts,
		},
		'output-chunk-filename': '[name].[chunkhash].js',
		'output-path': path.join( __dirname, '_inc', 'blocks' ),
	}
);

const transpileConfig = extensionsWebpackConfig.module.rules.find( rule =>
	rule.use.some( loader => loader.options.presets )
);

// Get files for wizards scripts.
const wizardsScripts = fs
	.readdirSync( wizardsDir )
	.filter( wizard =>
		fs.existsSync( path.join( __dirname, 'assets', 'wizards', wizard, 'index.js' ) )
	);
const wizardsScriptFiles = {};
wizardsScripts.forEach( function( wizard ) {
	wizardsScriptFiles[ wizard ] = [
		path.join( __dirname, 'assets', 'shared', 'js', 'public-path.js' ),
		path.join( __dirname, 'assets', 'wizards', wizard, 'index.js' ),
	];
} );

const webpackConfig = getBaseWebpackConfig(
	{ WP: true },
	{
		entry: wizardsScriptFiles,
		'output-path': path.join( __dirname, 'dist' ),
	}
);

module.exports = webpackConfig;

function getWebpackConfig( env, argv ) {
	const webpackConfig = getBaseWebpackConfig( env, argv );

	return {
		...webpackConfig,
		entry: {
			// TODO: Remove this! It is only here to fix the empty build.
			index: './assets/block-editor/index.js',
		},
		output: {
			path: path.resolve( __dirname, 'assets/block-editor/build' ),
		},
		node: {
			crypto: 'empty',
		},
	};
}

entry: {
			editor: editorScript,
			'editor-experimental': editorExperimentalScript,
			'editor-beta': editorBetaScript,
			...viewBlocksScripts,
		},
		'output-chunk-filename': '[name].[chunkhash].js',
		'output-path': path.join( __dirname, '_inc', 'blocks' ),
	}
);

const transpileConfig = extensionsWebpackConfig.module.rules.find( rule =>
	rule.use.some( loader => loader.options.presets )
);

const componentsWebpackConfig = getBaseWebpackConfig(
	{ WP: false },
	{
		entry: {
			components: path.join( __dirname, './extensions/shared/components/index.jsx' ),
		},
		'output-chunk-filename': '[name].[chunkhash].js',
		'output-library-target': 'commonjs2',
		'output-path': path.join( __dirname, '_inc', 'blocks' ),
		'output-pathinfo': true,
	}
);

// We export two configuration files: One for admin.js, and one for components.jsx.
// The latter produces pre-rendered components HTML.
module.exports = [
	{

/**
 * External dependencies
 */
const getBaseWebpackConfig = require( '@automattic/calypso-build/webpack.config.js' );
const path = require( 'path' );
const StaticSiteGeneratorPlugin = require( 'static-site-generator-webpack-plugin' );
const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );

const isDevelopment = process.env.NODE_ENV !== 'production';

const baseWebpackConfig = getBaseWebpackConfig(
	{ WP: false },
	{
		entry: {}, // We'll override later
		'output-filename': '[name].js',
		'output-path': path.join( __dirname, '_inc', 'build' ),
	}
);

const sharedWebpackConfig = {
	...baseWebpackConfig,
	resolve: {
		...baseWebpackConfig.resolve,
		modules: [ path.resolve( __dirname, '_inc/client' ), 'node_modules' ],
	},
	node: {
		fs: 'empty',

let outputFilename = '[name].[chunkhash].min.js'; // prefer the chunkhash, which depends on the chunk, not the entire build
let outputChunkFilename = '[name].[chunkhash].min.js'; // ditto

// we should not use chunkhash in development: https://github.com/webpack/webpack-dev-server/issues/377#issuecomment-241258405
// also we don't minify so dont name them .min.js
//
// Desktop: no chunks or dll here, just one big file for the desktop app
if ( isDevelopment || isDesktop ) {
	outputFilename = '[name].js';
	outputChunkFilename = '[name].js';
}

const cssFilename = cssNameFromFilename( outputFilename );
const cssChunkFilename = cssNameFromFilename( outputChunkFilename );

const fileLoader = FileConfig.loader(
	// The server bundler express middleware server assets from the hard-coded publicPath `/calypso/evergreen/`.
	// This is required so that running calypso via `npm start` doesn't break.
	isDevelopment
		? {
				outputPath: 'images',
				publicPath: '/calypso/evergreen/images/',
		  }
		: {
				// File-loader does not understand absolute paths so __dirname won't work.
				// Build off `output.path` for a result like `/…/public/evergreen/../images/`.
				outputPath: path.join( '..', 'images' ),
				publicPath: '/calypso/images/',
				emitFile: browserslistEnv === defaultBrowserslistEnv, // Only output files once.
		  }
);

* Internal dependencies
 */
const cacheIdentifier = require( './server/bundler/babel/babel-loader-cache-identifier' );
const config = require( 'config' );
const bundleEnv = config( 'env' );
const { workerCount } = require( './webpack.common' );
const TranspileConfig = require( '@automattic/calypso-build/webpack/transpile' );
const nodeExternals = require( 'webpack-node-externals' );
const FileConfig = require( '@automattic/calypso-build/webpack/file-loader' );

/**
 * Internal variables
 */
const isDevelopment = bundleEnv === 'development';

const fileLoader = FileConfig.loader( {
	publicPath: isDevelopment ? '/calypso/evergreen/images/' : '/calypso/images/',
	emitFile: false, // On the server side, don't actually copy files
} );

const commitSha = process.env.hasOwnProperty( 'COMMIT_SHA' ) ? process.env.COMMIT_SHA : '(unknown)';

/**
 * This lists modules that must use commonJS `require()`s
 * All modules listed here need to be ES5.
 *
 * @returns {Array} list of externals
 */
function getExternals() {
	return [
		// Don't bundle any node_modules, both to avoid a massive bundle, and problems
		// with modules that are incompatible with webpack bundling.