webpack.config.js

/**
 * External dependencies.
 */
const path = require( 'path' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
const OptimizeCssAssetsPlugin = require( 'optimize-css-assets-webpack-plugin' );
const TerserPlugin = require( 'terser-webpack-plugin' );
const { ProvidePlugin } = require( 'webpack' );

/**
 * Indicates if we're running the build process in production mode.
 *
 * @type {Boolean}
 */
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
	entry: {
		bundle: './src/index.js'
	},
	output: {
		path: path.resolve( __dirname, 'build' ),
		filename: isProduction ? '[name].min.js' : '[name].js'
	},
	module: {
		rules: [
			{
				test: /\.js$/,
				exclude: /node_modules/,
				use: {
					loader: 'babel-loader',
					options: {
						cacheDirectory: true
					}
				}
			},
			{
				test: /\.scss$/,
				use: [
					MiniCssExtractPlugin.loader,
					{
						loader: 'css-loader',
						options: {
							importLoaders: 2
						}
					},
					{
						loader: 'postcss-loader'
					},
					{
						loader: 'sass-loader'
					}
				]
			}
		]
	},
	externals: [
		'@wordpress/compose',
		'@wordpress/data',
		'@wordpress/element',
		'@wordpress/hooks',
		'@wordpress/i18n',
		'classnames',
		'lodash'
	].reduce( ( memo, name ) => {
		memo[ name ] = `cf.vendor['${ name }']`;

		return memo;
	}, {
		'@carbon-fields/core': 'cf.core'
	} ),
	plugins: [
		new MiniCssExtractPlugin( {
			filename: isProduction ? '[name].min.css' : '[name].css'
		} ),

		new ProvidePlugin( {
			'wp.element': '@wordpress/element'
		} ),

		...(
			isProduction
			? [
				new OptimizeCssAssetsPlugin( {
					cssProcessorPluginOptions: {
						preset: [ 'default', { discardComments: { removeAll: true } } ]
					}
				} ),
				new TerserPlugin( {
					cache: true,
					parallel: true
				} )
			]
			: []
		)
	],
	stats: {
		modules: false,
		hash: false,
		builtAt: false,
		children: false
	}
};