woocommerce/plugins/woocommerce-blocks/bin/webpack-configs.js

1178 lines
28 KiB
JavaScript

/**
* External dependencies
*/
const path = require( 'path' );
const fs = require( 'fs' );
const { paramCase } = require( 'change-case' );
const RemoveFilesPlugin = require( './remove-files-webpack-plugin' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
const ProgressBarPlugin = require( 'progress-bar-webpack-plugin' );
const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );
const WebpackRTLPlugin = require( './webpack-rtl-plugin' );
const TerserPlugin = require( 'terser-webpack-plugin' );
const CreateFileWebpack = require( 'create-file-webpack' );
const CircularDependencyPlugin = require( 'circular-dependency-plugin' );
const { BundleAnalyzerPlugin } = require( 'webpack-bundle-analyzer' );
const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
/**
* Internal dependencies
*/
const { getEntryConfig } = require( './webpack-entries' );
const {
ASSET_CHECK,
NODE_ENV,
CHECK_CIRCULAR_DEPS,
requestToExternal,
requestToHandle,
getProgressBarPluginConfig,
getCacheGroups,
} = require( './webpack-helpers' );
const AddSplitChunkDependencies = require( './add-split-chunk-dependencies' );
const isProduction = NODE_ENV === 'production';
/**
* Shared config for all script builds.
*/
let initialBundleAnalyzerPort = 8888;
const getSharedPlugins = ( {
bundleAnalyzerReportTitle,
checkCircularDeps = true,
} ) =>
[
CHECK_CIRCULAR_DEPS === 'true' && checkCircularDeps !== false
? new CircularDependencyPlugin( {
exclude: [ /[\/\\](node_modules|build|docs|vendor)[\/\\]/ ],
cwd: process.cwd(),
failOnError: 'warn',
} )
: false,
// The WP_BUNDLE_ANALYZER global variable enables a utility that represents bundle
// content as a convenient interactive zoomable treemap.
process.env.WP_BUNDLE_ANALYZER &&
new BundleAnalyzerPlugin( {
analyzerPort: initialBundleAnalyzerPort++,
reportTitle: bundleAnalyzerReportTitle,
} ),
new DependencyExtractionWebpackPlugin( {
injectPolyfill: true,
combineAssets: ASSET_CHECK,
outputFormat: ASSET_CHECK ? 'json' : 'php',
requestToExternal,
requestToHandle,
} ),
].filter( Boolean );
/**
* Build config for core packages.
*
* @param {Object} options Build options.
*/
const getCoreConfig = ( options = {} ) => {
const { alias, resolvePlugins = [] } = options;
const resolve = alias
? {
alias,
plugins: resolvePlugins,
}
: {
plugins: resolvePlugins,
};
return {
entry: getEntryConfig( 'core', options.exclude || [] ),
output: {
filename: ( chunkData ) => {
return `${ paramCase( chunkData.chunk.name ) }.js`;
},
path: path.resolve( __dirname, '../build/' ),
library: [ 'wc', '[name]' ],
libraryTarget: 'this',
uniqueName: 'webpackWcBlocksCoreJsonp',
},
module: {
rules: [
{
test: /\.(t|j)sx?$/,
exclude: [
/[\/\\](node_modules|build|docs|bin|storybook|tests|test)[\/\\]/,
],
use: {
loader: 'babel-loader',
options: {
presets: [ '@wordpress/babel-preset-default' ],
plugins: [
'@babel/plugin-proposal-optional-chaining',
'@babel/plugin-proposal-class-properties',
],
cacheDirectory: path.resolve(
__dirname,
'../../../node_modules/.cache/babel-loader'
),
cacheCompression: false,
},
},
},
{
test: /\.s[c|a]ss$/,
use: {
loader: 'ignore-loader',
},
},
],
},
plugins: [
...getSharedPlugins( {
bundleAnalyzerReportTitle: 'Core',
} ),
new ProgressBarPlugin( getProgressBarPluginConfig( 'Core' ) ),
new CreateFileWebpack( {
path: './',
// file name
fileName: 'blocks.ini',
// content of the file
content: `
woocommerce_blocks_env = ${ NODE_ENV }
`.trim(),
} ),
],
optimization: {
// Only concatenate modules in production, when not analyzing bundles.
concatenateModules:
isProduction && ! process.env.WP_BUNDLE_ANALYZER,
splitChunks: {
automaticNameDelimiter: '--',
cacheGroups: {
...getCacheGroups(),
},
},
minimizer: [
new TerserPlugin( {
parallel: true,
terserOptions: {
output: {
comments: /translators:/i,
},
compress: {
passes: 2,
},
mangle: {
reserved: [ '__', '_n', '_nx', '_x' ],
},
},
extractComments: false,
} ),
],
},
resolve: {
...resolve,
extensions: [ '.js', '.ts', '.tsx' ],
},
};
};
/**
* Build config for Blocks in the editor context.
*
* @param {Object} options Build options.
*/
const getMainConfig = ( options = {} ) => {
let { fileSuffix } = options;
const { alias, resolvePlugins = [] } = options;
fileSuffix = fileSuffix ? `-${ fileSuffix }` : '';
const resolve = alias
? {
alias,
plugins: resolvePlugins,
}
: {
plugins: resolvePlugins,
};
return {
entry: getEntryConfig( 'main', options.exclude || [] ),
output: {
devtoolNamespace: 'wc',
path: path.resolve( __dirname, '../build/' ),
// This is a cache busting mechanism which ensures that the script is loaded via the browser with a ?ver=hash
// string. The hash is based on the built file contents.
// @see https://github.com/webpack/webpack/issues/2329
// Using the ?ver string is needed here so the filename does not change between builds. The WordPress
// i18n system relies on the hash of the filename, so changing that frequently would result in broken
// translations which we must avoid.
// @see https://github.com/Automattic/jetpack/pull/20926
chunkFilename: `[name]${ fileSuffix }.js?ver=[contenthash]`,
filename: `[name]${ fileSuffix }.js`,
library: [ 'wc', 'blocks', '[name]' ],
libraryTarget: 'this',
uniqueName: 'webpackWcBlocksMainJsonp',
},
module: {
rules: [
{
test: /\.(j|t)sx?$/,
exclude: [ /[\/\\](node_modules|build|docs|vendor)[\/\\]/ ],
use: {
loader: 'babel-loader',
options: {
presets: [ '@wordpress/babel-preset-default' ],
plugins: [
isProduction
? require.resolve(
'babel-plugin-transform-react-remove-prop-types'
)
: false,
'@babel/plugin-proposal-optional-chaining',
'@babel/plugin-proposal-class-properties',
].filter( Boolean ),
cacheDirectory: path.resolve(
__dirname,
'../../../node_modules/.cache/babel-loader'
),
cacheCompression: false,
},
},
},
{
test: /\.s[c|a]ss$/,
use: {
loader: 'ignore-loader',
},
},
],
},
optimization: {
concatenateModules:
isProduction && ! process.env.WP_BUNDLE_ANALYZER,
splitChunks: {
minSize: 200000,
automaticNameDelimiter: '--',
cacheGroups: {
commons: {
test: /[\/\\]node_modules[\/\\]/,
name: 'wc-blocks-vendors',
chunks: 'all',
enforce: true,
},
...getCacheGroups(),
},
},
minimizer: [
new TerserPlugin( {
parallel: true,
terserOptions: {
output: {
comments: /translators:/i,
},
compress: {
passes: 2,
},
mangle: {
reserved: [ '__', '_n', '_nx', '_x' ],
},
},
extractComments: false,
} ),
],
},
plugins: [
...getSharedPlugins( {
bundleAnalyzerReportTitle: 'Main',
} ),
new ProgressBarPlugin( getProgressBarPluginConfig( 'Main' ) ),
new CopyWebpackPlugin( {
patterns: [
{
from: './assets/js/**/block.json',
to( { absoluteFilename } ) {
/**
* Getting the block name from the JSON metadata is less error prone
* than extracting it from the file path.
*/
const JSONFile = fs.readFileSync(
path.resolve( __dirname, absoluteFilename )
);
const metadata = JSON.parse( JSONFile.toString() );
const blockName = metadata.name
.split( '/' )
.at( 1 );
if ( metadata.parent )
return `./inner-blocks/${ blockName }/block.json`;
return `./${ blockName }/block.json`;
},
},
],
} ),
],
resolve: {
...resolve,
extensions: [ '.js', '.jsx', '.ts', '.tsx' ],
},
};
};
/**
* Build config for Blocks in the frontend context.
*
* @param {Object} options Build options.
*/
const getFrontConfig = ( options = {} ) => {
let { fileSuffix } = options;
const { alias, resolvePlugins = [] } = options;
fileSuffix = fileSuffix ? `-${ fileSuffix }` : '';
const resolve = alias
? {
alias,
plugins: resolvePlugins,
}
: {
plugins: resolvePlugins,
};
return {
entry: getEntryConfig( 'frontend', options.exclude || [] ),
output: {
devtoolNamespace: 'wc',
path: path.resolve( __dirname, '../build/' ),
// This is a cache busting mechanism which ensures that the script is loaded via the browser with a ?ver=hash
// string. The hash is based on the built file contents.
// @see https://github.com/webpack/webpack/issues/2329
// Using the ?ver string is needed here so the filename does not change between builds. The WordPress
// i18n system relies on the hash of the filename, so changing that frequently would result in broken
// translations which we must avoid.
// @see https://github.com/Automattic/jetpack/pull/20926
chunkFilename: `[name]-frontend${ fileSuffix }.js?ver=[contenthash]`,
filename: () => {
return `[name]-frontend${ fileSuffix }.js`;
},
uniqueName: 'webpackWcBlocksFrontendJsonp',
library: [ 'wc', '[name]' ],
},
module: {
rules: [
{
test: /\.(j|t)sx?$/,
exclude: [ /[\/\\](node_modules|build|docs|vendor)[\/\\]/ ],
use: {
loader: 'babel-loader',
options: {
presets: [
[
'@wordpress/babel-preset-default',
{
modules: false,
targets: {
browsers: [
'extends @wordpress/browserslist-config',
],
},
},
],
],
plugins: [
isProduction
? require.resolve(
'babel-plugin-transform-react-remove-prop-types'
)
: false,
'@babel/plugin-proposal-optional-chaining',
'@babel/plugin-proposal-class-properties',
].filter( Boolean ),
cacheDirectory: path.resolve(
__dirname,
'../../../node_modules/.cache/babel-loader'
),
cacheCompression: false,
},
},
},
{
test: /\.s[c|a]ss$/,
use: {
loader: 'ignore-loader',
},
},
],
},
optimization: {
concatenateModules:
isProduction && ! process.env.WP_BUNDLE_ANALYZER,
splitChunks: {
minSize: 200000,
automaticNameDelimiter: '--',
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
// Note that filenames are suffixed with `frontend` so the generated file is `wc-blocks-frontend-vendors-frontend`.
name: 'wc-blocks-frontend-vendors',
chunks: ( chunk ) => {
return (
chunk.name !== 'product-button-interactivity'
);
},
enforce: true,
},
...getCacheGroups(),
},
},
minimizer: [
new TerserPlugin( {
parallel: true,
terserOptions: {
output: {
comments: /translators:/i,
},
compress: {
passes: 2,
},
mangle: {
reserved: [ '__', '_n', '_nx', '_x' ],
},
},
extractComments: false,
} ),
],
},
plugins: [
...getSharedPlugins( {
bundleAnalyzerReportTitle: 'Frontend',
} ),
new ProgressBarPlugin( getProgressBarPluginConfig( 'Frontend' ) ),
new AddSplitChunkDependencies(),
],
resolve: {
...resolve,
extensions: [ '.js', '.ts', '.tsx' ],
},
};
};
/**
* Build config for built-in payment gateway integrations.
*
* @param {Object} options Build options.
*/
const getPaymentsConfig = ( options = {} ) => {
const { alias, resolvePlugins = [] } = options;
const resolve = alias
? {
alias,
plugins: resolvePlugins,
}
: {
plugins: resolvePlugins,
};
return {
entry: getEntryConfig( 'payments', options.exclude || [] ),
output: {
devtoolNamespace: 'wc',
path: path.resolve( __dirname, '../build/' ),
filename: `[name].js`,
uniqueName: 'webpackWcBlocksPaymentMethodExtensionJsonp',
},
module: {
rules: [
{
test: /\.(j|t)sx?$/,
exclude: [ /[\/\\](node_modules|build|docs|vendor)[\/\\]/ ],
use: {
loader: 'babel-loader',
options: {
presets: [
[
'@wordpress/babel-preset-default',
{
modules: false,
targets: {
browsers: [
'extends @wordpress/browserslist-config',
],
},
},
],
],
plugins: [
isProduction
? require.resolve(
'babel-plugin-transform-react-remove-prop-types'
)
: false,
'@babel/plugin-proposal-optional-chaining',
'@babel/plugin-proposal-class-properties',
].filter( Boolean ),
cacheDirectory: path.resolve(
__dirname,
'../../../node_modules/.cache/babel-loader'
),
cacheCompression: false,
},
},
},
{
test: /\.s[c|a]ss$/,
use: {
loader: 'ignore-loader',
},
},
],
},
optimization: {
concatenateModules:
isProduction && ! process.env.WP_BUNDLE_ANALYZER,
splitChunks: {
automaticNameDelimiter: '--',
cacheGroups: {
...getCacheGroups(),
},
},
minimizer: [
new TerserPlugin( {
parallel: true,
terserOptions: {
output: {
comments: /translators:/i,
},
compress: {
passes: 2,
},
mangle: {
reserved: [ '__', '_n', '_nx', '_x' ],
},
},
extractComments: false,
} ),
],
},
plugins: [
...getSharedPlugins( {
bundleAnalyzerReportTitle: 'Payment Method Extensions',
} ),
new ProgressBarPlugin(
getProgressBarPluginConfig( 'Payment Method Extensions' )
),
],
resolve: {
...resolve,
extensions: [ '.js', '.ts', '.tsx' ],
},
};
};
/**
* Build config for extension integrations.
*
* @param {Object} options Build options.
*/
const getExtensionsConfig = ( options = {} ) => {
const { alias, resolvePlugins = [] } = options;
const resolve = alias
? {
alias,
plugins: resolvePlugins,
}
: {
plugins: resolvePlugins,
};
return {
entry: getEntryConfig( 'extensions', options.exclude || [] ),
output: {
devtoolNamespace: 'wc',
path: path.resolve( __dirname, '../build/' ),
filename: `[name].js`,
uniqueName: 'webpackWcBlocksExtensionsMethodExtensionJsonp',
},
module: {
rules: [
{
test: /\.(j|t)sx?$/,
exclude: [ /[\/\\](node_modules|build|docs|vendor)[\/\\]/ ],
use: {
loader: 'babel-loader',
options: {
presets: [
[
'@wordpress/babel-preset-default',
{
modules: false,
targets: {
browsers: [
'extends @wordpress/browserslist-config',
],
},
},
],
],
plugins: [
isProduction
? require.resolve(
'babel-plugin-transform-react-remove-prop-types'
)
: false,
'@babel/plugin-proposal-optional-chaining',
'@babel/plugin-proposal-class-properties',
].filter( Boolean ),
cacheDirectory: path.resolve(
__dirname,
'../../../node_modules/.cache/babel-loader'
),
cacheCompression: false,
},
},
},
{
test: /\.s[c|a]ss$/,
use: {
loader: 'ignore-loader',
},
},
],
},
optimization: {
concatenateModules:
isProduction && ! process.env.WP_BUNDLE_ANALYZER,
splitChunks: {
automaticNameDelimiter: '--',
cacheGroups: {
...getCacheGroups(),
},
},
minimizer: [
new TerserPlugin( {
parallel: true,
terserOptions: {
output: {
comments: /translators:/i,
},
compress: {
passes: 2,
},
mangle: {
reserved: [ '__', '_n', '_nx', '_x' ],
},
},
extractComments: false,
} ),
],
},
plugins: [
...getSharedPlugins( {
bundleAnalyzerReportTitle: 'Experimental Extensions',
} ),
new ProgressBarPlugin(
getProgressBarPluginConfig( 'Experimental Extensions' )
),
],
resolve: {
...resolve,
extensions: [ '.js', '.ts', '.tsx' ],
},
};
};
/**
* Build config for scripts to be used exclusively within the Site Editor context.
*
* @param {Object} options Build options.
*/
const getSiteEditorConfig = ( options = {} ) => {
const { alias, resolvePlugins = [] } = options;
const resolve = alias
? {
alias,
plugins: resolvePlugins,
}
: {
plugins: resolvePlugins,
};
return {
entry: getEntryConfig( 'editor', options.exclude || [] ),
output: {
devtoolNamespace: 'wc',
path: path.resolve( __dirname, '../build/' ),
filename: `[name].js`,
chunkLoadingGlobal: 'webpackWcBlocksExtensionsMethodExtensionJsonp',
},
module: {
rules: [
{
test: /\.(j|t)sx?$/,
exclude: [ /[\/\\](node_modules|build|docs|vendor)[\/\\]/ ],
use: {
loader: 'babel-loader',
options: {
presets: [
[
'@wordpress/babel-preset-default',
{
modules: false,
targets: {
browsers: [
'extends @wordpress/browserslist-config',
],
},
},
],
],
plugins: [
isProduction
? require.resolve(
'babel-plugin-transform-react-remove-prop-types'
)
: false,
'@babel/plugin-proposal-optional-chaining',
].filter( Boolean ),
cacheDirectory: path.resolve(
__dirname,
'../../../node_modules/.cache/babel-loader'
),
cacheCompression: false,
},
},
},
{
test: /\.s[c|a]ss$/,
use: {
loader: 'ignore-loader',
},
},
],
},
optimization: {
concatenateModules:
isProduction && ! process.env.WP_BUNDLE_ANALYZER,
splitChunks: {
automaticNameDelimiter: '--',
cacheGroups: {
...getCacheGroups(),
},
},
minimizer: [
new TerserPlugin( {
parallel: true,
terserOptions: {
output: {
comments: /translators:/i,
},
compress: {
passes: 2,
},
mangle: {
reserved: [ '__', '_n', '_nx', '_x' ],
},
},
extractComments: false,
} ),
],
},
plugins: [
...getSharedPlugins( {
bundleAnalyzerReportTitle: 'Site Editor',
} ),
new ProgressBarPlugin(
getProgressBarPluginConfig( 'Site Editor' )
),
],
resolve: {
...resolve,
extensions: [ '.js', '.ts', '.tsx' ],
},
};
};
/**
* Build config for CSS Styles.
*
* @param {Object} options Build options.
*/
const getStylingConfig = ( options = {} ) => {
let { fileSuffix } = options;
const { alias, resolvePlugins = [] } = options;
fileSuffix = fileSuffix ? `-${ fileSuffix }` : '';
const resolve = alias
? {
alias,
plugins: resolvePlugins,
}
: {
plugins: resolvePlugins,
};
return {
entry: getEntryConfig( 'styling', options.exclude || [] ),
output: {
devtoolNamespace: 'wc',
path: path.resolve( __dirname, '../build/' ),
filename: `[name]-style${ fileSuffix }.js`,
library: [ 'wc', 'blocks', '[name]' ],
libraryTarget: 'this',
uniqueName: 'webpackWcBlocksStylingJsonp',
},
optimization: {
splitChunks: {
automaticNameDelimiter: '--',
cacheGroups: {
editorStyle: {
// Capture all `editor` stylesheets and editor-components stylesheets.
test: ( module = {}, { moduleGraph } ) => {
if ( ! module.type.includes( 'css' ) ) {
return false;
}
const moduleIssuer =
moduleGraph.getIssuer( module );
if ( ! moduleIssuer ) {
return false;
}
return (
moduleIssuer.resource.endsWith(
'editor.scss'
) ||
moduleIssuer.resource.includes(
`${ path.sep }assets${ path.sep }js${ path.sep }editor-components${ path.sep }`
)
);
},
name: 'wc-blocks-editor-style',
chunks: 'all',
priority: 10,
},
...getCacheGroups(),
'base-components': {
test: /\/assets\/js\/base\/components\//,
name( module, chunks, cacheGroupKey ) {
const moduleFileName = module
.identifier()
.split( '/' )
.reduceRight( ( item ) => item )
.split( '|' )
.reduce( ( item ) => item );
const allChunksNames = chunks
.map( ( item ) => item.name )
.join( '~' );
return `${ cacheGroupKey }-${ allChunksNames }-${ moduleFileName }`;
},
},
},
},
},
module: {
rules: [
{
test: /\.(j|t)sx?$/,
exclude: [ /[\/\\](node_modules|build|docs|vendor)[\/\\]/ ],
use: {
loader: 'babel-loader',
options: {
presets: [ '@wordpress/babel-preset-default' ],
plugins: [
isProduction
? require.resolve(
'babel-plugin-transform-react-remove-prop-types'
)
: false,
'@babel/plugin-proposal-optional-chaining',
'@babel/plugin-proposal-class-properties',
].filter( Boolean ),
cacheDirectory: path.resolve(
__dirname,
'../../../node_modules/.cache/babel-loader'
),
cacheCompression: false,
},
},
},
{
test: /\.s?css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
{
loader: 'sass-loader',
options: {
sassOptions: {
includePaths: [ 'assets/css/abstracts' ],
},
additionalData: ( content, loaderContext ) => {
const { resourcePath, rootContext } =
loaderContext;
const relativePath = path.relative(
rootContext,
resourcePath
);
if (
relativePath.startsWith(
'assets/css/abstracts/'
) ||
relativePath.startsWith(
'assets\\css\\abstracts\\'
)
) {
return content;
}
return (
'@use "sass:math";' +
'@use "sass:string";' +
'@use "sass:color";' +
'@use "sass:map";' +
'@import "_colors"; ' +
'@import "_variables"; ' +
'@import "_breakpoints"; ' +
'@import "_mixins"; ' +
content
);
},
},
},
],
},
],
},
plugins: [
...getSharedPlugins( { bundleAnalyzerReportTitle: 'Styles' } ),
new ProgressBarPlugin( getProgressBarPluginConfig( 'Styles' ) ),
new MiniCssExtractPlugin( {
filename: `[name]${ fileSuffix }.css`,
} ),
new WebpackRTLPlugin( {
filenameSuffix: '-rtl.css',
} ),
// Remove JS files generated by MiniCssExtractPlugin.
new RemoveFilesPlugin( `./build/*style${ fileSuffix }.js` ),
],
resolve: {
...resolve,
extensions: [ '.js', '.jsx', '.ts', '.tsx' ],
},
};
};
const getInteractivityAPIConfig = ( options = {} ) => {
const { alias, resolvePlugins = [] } = options;
return {
entry: {
'wc-interactivity': './assets/js/interactivity',
},
output: {
filename: '[name].js',
path: path.resolve( __dirname, '../build/' ),
library: [ 'wc', '__experimentalInteractivity' ],
libraryTarget: 'this',
chunkLoadingGlobal: 'webpackWcBlocksJsonp',
},
resolve: {
alias,
plugins: resolvePlugins,
extensions: [ '.js', '.ts', '.tsx' ],
},
plugins: [
...getSharedPlugins( {
bundleAnalyzerReportTitle: 'WP directives',
checkCircularDeps: false,
} ),
new ProgressBarPlugin(
getProgressBarPluginConfig( 'WP directives' )
),
],
module: {
rules: [
{
test: /\.(j|t)sx?$/,
exclude: [ /[\/\\](node_modules|build|docs|vendor)[\/\\]/ ],
use: [
{
loader: require.resolve( 'babel-loader' ),
options: {
babelrc: false,
configFile: false,
presets: [
'@babel/preset-typescript',
[
'@babel/preset-react',
{
runtime: 'automatic',
importSource: 'preact',
},
],
],
// Required until Webpack is updated to ^5.0.0
plugins: [
'@babel/plugin-proposal-optional-chaining',
'@babel/plugin-proposal-class-properties',
],
cacheDirectory: path.resolve(
__dirname,
'../../../node_modules/.cache/babel-loader'
),
cacheCompression: false,
},
},
],
},
],
},
};
};
const getCartAndCheckoutFrontendConfig = ( options = {} ) => {
let { fileSuffix } = options;
const { alias, resolvePlugins = [] } = options;
fileSuffix = fileSuffix ? `-${ fileSuffix }` : '';
const resolve = alias
? {
alias,
plugins: resolvePlugins,
}
: {
plugins: resolvePlugins,
};
return {
entry: getEntryConfig(
'cartAndCheckoutFrontend',
options.exclude || []
),
output: {
devtoolNamespace: 'wc',
path: path.resolve( __dirname, '../build/' ),
// This is a cache busting mechanism which ensures that the script is loaded via the browser with a ?ver=hash
// string. The hash is based on the built file contents.
// @see https://github.com/webpack/webpack/issues/2329
// Using the ?ver string is needed here so the filename does not change between builds. The WordPress
// i18n system relies on the hash of the filename, so changing that frequently would result in broken
// translations which we must avoid.
// @see https://github.com/Automattic/jetpack/pull/20926
chunkFilename: `[name]-frontend${ fileSuffix }.js?ver=[contenthash]`,
filename: ( pathData ) => {
// blocksCheckout and blocksComponents were moved from core bundle,
// retain their filenames to avoid breaking translations.
if (
pathData.chunk.name === 'blocksCheckout' ||
pathData.chunk.name === 'blocksComponents'
) {
return `${ paramCase(
pathData.chunk.name
) }${ fileSuffix }.js`;
}
return `[name]-frontend${ fileSuffix }.js`;
},
uniqueName: 'webpackWcBlocksCartCheckoutFrontendJsonp',
library: [ 'wc', '[name]' ],
},
module: {
rules: [
{
test: /\.(j|t)sx?$/,
exclude: [ /[\/\\](node_modules|build|docs|vendor)[\/\\]/ ],
use: {
loader: 'babel-loader',
options: {
presets: [
[
'@wordpress/babel-preset-default',
{
modules: false,
targets: {
browsers: [
'extends @wordpress/browserslist-config',
],
},
},
],
],
plugins: [
isProduction
? require.resolve(
'babel-plugin-transform-react-remove-prop-types'
)
: false,
'@babel/plugin-proposal-optional-chaining',
'@babel/plugin-proposal-class-properties',
].filter( Boolean ),
cacheDirectory: path.resolve(
__dirname,
'../../../node_modules/.cache/babel-loader'
),
cacheCompression: false,
},
},
},
{
test: /\.s[c|a]ss$/,
use: {
loader: 'ignore-loader',
},
},
],
},
optimization: {
concatenateModules:
isProduction && ! process.env.WP_BUNDLE_ANALYZER,
splitChunks: {
minSize: 200000,
automaticNameDelimiter: '--',
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'wc-cart-checkout-vendors',
chunks: 'all',
enforce: true,
},
base: {
// A refined include blocks and settings that are shared between cart and checkout that produces the smallest possible bundle.
test: /assets[\\/]js[\\/](settings|previews|base|data|utils|blocks[\\/]cart-checkout-shared|icons)|packages[\\/](checkout|components)|atomic[\\/]utils/,
name: 'wc-cart-checkout-base',
chunks: 'all',
enforce: true,
},
...getCacheGroups(),
},
},
minimizer: [
new TerserPlugin( {
parallel: true,
terserOptions: {
output: {
comments: /translators:/i,
},
compress: {
passes: 2,
},
mangle: {
reserved: [ '__', '_n', '_nx', '_x' ],
},
},
extractComments: false,
} ),
],
},
plugins: [
...getSharedPlugins( {
bundleAnalyzerReportTitle: 'Cart & Checkout Frontend',
} ),
new ProgressBarPlugin(
getProgressBarPluginConfig( 'Cart & Checkout Frontend' )
),
new AddSplitChunkDependencies(),
],
resolve: {
...resolve,
extensions: [ '.js', '.ts', '.tsx' ],
},
};
};
module.exports = {
getCoreConfig,
getFrontConfig,
getMainConfig,
getPaymentsConfig,
getExtensionsConfig,
getSiteEditorConfig,
getStylingConfig,
getInteractivityAPIConfig,
getCartAndCheckoutFrontendConfig,
};