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

831 lines
19 KiB
JavaScript

/**
* External dependencies
*/
const path = require( 'path' );
const { kebabCase } = require( 'lodash' );
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' );
/**
* Internal dependencies
*/
const { getEntryConfig } = require( './webpack-entries' );
const {
NODE_ENV,
CHECK_CIRCULAR_DEPS,
requestToExternal,
requestToHandle,
requestToExternalInsideGB,
requestToHandleInsideGB,
findModuleMatch,
getProgressBarPluginConfig,
} = require( './webpack-helpers' );
const isProduction = NODE_ENV === 'production';
/**
* Shared config for all script builds.
*/
const sharedPlugins = [
CHECK_CIRCULAR_DEPS === 'true'
? new CircularDependencyPlugin( {
exclude: /node_modules/,
cwd: process.cwd(),
failOnError: 'warn',
} )
: false,
new DependencyExtractionWebpackPlugin( {
injectPolyfill: true,
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 `${ kebabCase( chunkData.chunk.name ) }.js`;
},
path: path.resolve( __dirname, '../build/' ),
library: [ 'wc', '[name]' ],
libraryTarget: 'this',
// This fixes an issue with multiple webpack projects using chunking
// overwriting each other's chunk loader function.
// See https://webpack.js.org/configuration/output/#outputjsonpfunction
jsonpFunction: 'webpackWcBlocksJsonp',
},
module: {
rules: [
{
test: /\.(t|j)sx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader?cacheDirectory',
options: {
presets: [ '@wordpress/babel-preset-default' ],
plugins: [
require.resolve(
'@babel/plugin-proposal-class-properties'
),
].filter( Boolean ),
},
},
},
{
test: /\.s[c|a]ss$/,
use: {
loader: 'ignore-loader',
},
},
],
},
plugins: [
...sharedPlugins,
new ProgressBarPlugin(
getProgressBarPluginConfig( 'Core', options.fileSuffix )
),
new CreateFileWebpack( {
path: './',
// file name
fileName: 'blocks.ini',
// content of the file
content: `
woocommerce_blocks_phase = ${ process.env.WOOCOMMERCE_BLOCKS_PHASE || 3 }
woocommerce_blocks_env = ${ NODE_ENV }
`.trim(),
} ),
],
optimization: {
splitChunks: {
automaticNameDelimiter: '--',
},
minimizer: [
new TerserPlugin( {
cache: true,
parallel: true,
sourceMap: ! isProduction,
terserOptions: {
output: {
comments: /translators:/i,
},
compress: {
passes: 2,
},
mangle: {
reserved: [ '__', '_n', '_nx', '_x' ],
},
},
extractComments: false,
} ),
],
},
resolve: {
...resolve,
extensions: [ '.js', '.ts', '.tsx' ],
},
};
};
/**
* Build config for core packages, in the editor context.
*
* This is meant to fix issue #3839 in which we have two instances of SlotFillProvider context. Should be deleted once wordpress/gutenberg#27462.
*
* @param {Object} options Build options.
*/
const getCoreEditorConfig = ( options = {} ) => {
// @todo delete getCoreEditorConfig when wordpress/gutenberg#27462 or equivalent is merged.
return {
...getCoreConfig( options ),
entry: {
blocksCheckout: './packages/checkout/index.js',
},
output: {
filename: ( chunkData ) => {
return `${ kebabCase( chunkData.chunk.name ) }-editor.js`;
},
path: path.resolve( __dirname, '../build/' ),
library: [ 'wc', '[name]' ],
libraryTarget: 'this',
// This fixes an issue with multiple webpack projects using chunking
// overwriting each other's chunk loader function.
// See https://webpack.js.org/configuration/output/#outputjsonpfunction
jsonpFunction: 'webpackWcBlocksJsonp',
},
plugins: [
new DependencyExtractionWebpackPlugin( {
injectPolyfill: true,
requestToExternal: requestToExternalInsideGB,
requestToHandle: requestToHandleInsideGB,
} ),
new ProgressBarPlugin(
getProgressBarPluginConfig( 'Core', options.fileSuffix )
),
new CreateFileWebpack( {
path: './',
// file name
fileName: 'blocks.ini',
// content of the file
content: `
woocommerce_blocks_phase = ${ process.env.WOOCOMMERCE_BLOCKS_PHASE || 3 }
woocommerce_blocks_env = ${ NODE_ENV }
`.trim(),
} ),
],
};
};
/**
* 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/' ),
filename: `[name]${ fileSuffix }.js`,
library: [ 'wc', 'blocks', '[name]' ],
libraryTarget: 'this',
// This fixes an issue with multiple webpack projects using chunking
// overwriting each other's chunk loader function.
// See https://webpack.js.org/configuration/output/#outputjsonpfunction
jsonpFunction: 'webpackWcBlocksJsonp',
},
module: {
rules: [
{
test: /\.(j|t)sx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader?cacheDirectory',
options: {
presets: [ '@wordpress/babel-preset-default' ],
plugins: [
isProduction
? require.resolve(
'babel-plugin-transform-react-remove-prop-types'
)
: false,
require.resolve(
'@babel/plugin-proposal-class-properties'
),
].filter( Boolean ),
},
},
},
{
test: /\.s[c|a]ss$/,
use: {
loader: 'ignore-loader',
},
},
],
},
optimization: {
splitChunks: {
minSize: 0,
automaticNameDelimiter: '--',
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'wc-blocks-vendors',
chunks: 'all',
enforce: true,
},
},
},
minimizer: [
new TerserPlugin( {
cache: true,
parallel: true,
sourceMap: ! isProduction,
terserOptions: {
output: {
comments: /translators:/i,
},
compress: {
passes: 2,
},
mangle: {
reserved: [ '__', '_n', '_nx', '_x' ],
},
},
extractComments: false,
} ),
],
},
plugins: [
...sharedPlugins,
new ProgressBarPlugin(
getProgressBarPluginConfig( 'Main', options.fileSuffix )
),
],
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/' ),
filename: `[name]-frontend${ fileSuffix }.js`,
// This fixes an issue with multiple webpack projects using chunking
// overwriting each other's chunk loader function.
// See https://webpack.js.org/configuration/output/#outputjsonpfunction
jsonpFunction: 'webpackWcBlocksJsonp',
},
module: {
rules: [
{
test: /\.(j|t)sx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader?cacheDirectory',
options: {
presets: [
[
'@babel/preset-env',
{
modules: false,
targets: {
browsers: [
'extends @wordpress/browserslist-config',
],
},
},
],
],
plugins: [
require.resolve(
'@babel/plugin-proposal-object-rest-spread'
),
require.resolve(
'@babel/plugin-transform-react-jsx'
),
require.resolve(
'@babel/plugin-proposal-async-generator-functions'
),
require.resolve(
'@babel/plugin-transform-runtime'
),
require.resolve(
'@babel/plugin-proposal-class-properties'
),
isProduction
? require.resolve(
'babel-plugin-transform-react-remove-prop-types'
)
: false,
].filter( Boolean ),
},
},
},
{
test: /\.s[c|a]ss$/,
use: {
loader: 'ignore-loader',
},
},
],
},
optimization: {
splitChunks: {
automaticNameDelimiter: '--',
},
minimizer: [
new TerserPlugin( {
cache: true,
parallel: true,
sourceMap: ! isProduction,
terserOptions: {
output: {
comments: /translators:/i,
},
compress: {
passes: 2,
},
mangle: {
reserved: [ '__', '_n', '_nx', '_x' ],
},
},
extractComments: false,
} ),
],
},
plugins: [
...sharedPlugins,
new ProgressBarPlugin(
getProgressBarPluginConfig( 'Frontend', options.fileSuffix )
),
],
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`,
// This fixes an issue with multiple webpack projects using chunking
// overwriting each other's chunk loader function.
// See https://webpack.js.org/configuration/output/#outputjsonpfunction
jsonpFunction: 'webpackWcBlocksPaymentMethodExtensionJsonp',
},
module: {
rules: [
{
test: /\.(j|t)sx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader?cacheDirectory',
options: {
presets: [
[
'@babel/preset-env',
{
modules: false,
targets: {
browsers: [
'extends @wordpress/browserslist-config',
],
},
},
],
],
plugins: [
require.resolve(
'@babel/plugin-proposal-object-rest-spread'
),
require.resolve(
'@babel/plugin-transform-react-jsx'
),
require.resolve(
'@babel/plugin-proposal-async-generator-functions'
),
require.resolve(
'@babel/plugin-transform-runtime'
),
require.resolve(
'@babel/plugin-proposal-class-properties'
),
isProduction
? require.resolve(
'babel-plugin-transform-react-remove-prop-types'
)
: false,
].filter( Boolean ),
},
},
},
{
test: /\.s[c|a]ss$/,
use: {
loader: 'ignore-loader',
},
},
],
},
optimization: {
splitChunks: {
automaticNameDelimiter: '--',
},
minimizer: [
new TerserPlugin( {
cache: true,
parallel: true,
sourceMap: ! isProduction,
terserOptions: {
output: {
comments: /translators:/i,
},
compress: {
passes: 2,
},
mangle: {
reserved: [ '__', '_n', '_nx', '_x' ],
},
},
extractComments: false,
} ),
],
},
plugins: [
...sharedPlugins,
new ProgressBarPlugin(
getProgressBarPluginConfig(
'Payment Method Extensions',
options.fileSuffix
)
),
],
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`,
jsonpFunction: 'webpackWcBlocksExtensionsMethodExtensionJsonp',
},
module: {
rules: [
{
test: /\.(j|t)sx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader?cacheDirectory',
options: {
presets: [
[
'@babel/preset-env',
{
modules: false,
targets: {
browsers: [
'extends @wordpress/browserslist-config',
],
},
},
],
],
plugins: [
require.resolve(
'@babel/plugin-proposal-object-rest-spread'
),
require.resolve(
'@babel/plugin-transform-react-jsx'
),
require.resolve(
'@babel/plugin-proposal-async-generator-functions'
),
require.resolve(
'@babel/plugin-transform-runtime'
),
require.resolve(
'@babel/plugin-proposal-class-properties'
),
isProduction
? require.resolve(
'babel-plugin-transform-react-remove-prop-types'
)
: false,
].filter( Boolean ),
},
},
},
],
},
optimization: {
splitChunks: {
automaticNameDelimiter: '--',
},
minimizer: [
new TerserPlugin( {
cache: true,
parallel: true,
sourceMap: ! isProduction,
terserOptions: {
output: {
comments: /translators:/i,
},
compress: {
passes: 2,
},
mangle: {
reserved: [ '__', '_n', '_nx', '_x' ],
},
},
extractComments: false,
} ),
],
},
plugins: [
...sharedPlugins,
new ProgressBarPlugin(
getProgressBarPluginConfig(
'Experimental Extensions',
options.fileSuffix
)
),
],
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',
// This fixes an issue with multiple webpack projects using chunking
// overwriting each other's chunk loader function.
// See https://webpack.js.org/configuration/output/#outputjsonpfunction
jsonpFunction: 'webpackWcBlocksJsonp',
},
optimization: {
splitChunks: {
minSize: 0,
automaticNameDelimiter: '--',
cacheGroups: {
editorStyle: {
// Capture all `editor` stylesheets and editor-components stylesheets.
test: ( module = {} ) =>
module.constructor.name === 'CssModule' &&
( findModuleMatch( module, /editor\.scss$/ ) ||
findModuleMatch(
module,
/[\\/]assets[\\/]js[\\/]editor-components[\\/]/
) ),
name: 'wc-blocks-editor-style',
chunks: 'all',
priority: 10,
},
vendorsStyle: {
test: /\/node_modules\/.*?style\.s?css$/,
name: 'wc-blocks-vendors-style',
chunks: 'all',
priority: 7,
},
blocksStyle: {
// Capture all stylesheets with name `style` or name that starts with underscore (abstracts).
test: /(style|_.*)\.scss$/,
name: 'wc-blocks-style',
chunks: 'all',
priority: 5,
},
},
},
},
module: {
rules: [
{
test: /\/node_modules\/.*?style\.s?css$/,
use: [
MiniCssExtractPlugin.loader,
{ loader: 'css-loader', options: { importLoaders: 1 } },
'postcss-loader',
{
loader: 'sass-loader',
options: {
sassOptions: {
includePaths: [ 'node_modules' ],
},
additionalData: ( content ) => {
const styleImports = [
'colors',
'breakpoints',
'variables',
'mixins',
'animations',
'z-index',
]
.map(
( imported ) =>
`@import "~@wordpress/base-styles/${ imported }";`
)
.join( ' ' );
return styleImports + content;
},
},
},
],
},
{
test: /\.s?css$/,
exclude: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
{ loader: 'css-loader', options: { importLoaders: 1 } },
'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/'
)
) {
return content;
}
return (
'@import "_colors"; ' +
'@import "_variables"; ' +
'@import "_breakpoints"; ' +
'@import "_mixins"; ' +
content
);
},
},
},
],
},
],
},
plugins: [
new ProgressBarPlugin(
getProgressBarPluginConfig( 'Styles', options.fileSuffix )
),
new WebpackRTLPlugin( {
filename: `[name]${ fileSuffix }-rtl.css`,
minify: {
safe: true,
},
} ),
new MiniCssExtractPlugin( {
filename: `[name]${ fileSuffix }.css`,
} ),
// Remove JS files generated by MiniCssExtractPlugin.
new RemoveFilesPlugin( `./build/*style${ fileSuffix }.js` ),
],
resolve: {
...resolve,
extensions: [ '.js', '.ts', '.tsx' ],
},
};
};
module.exports = {
getCoreConfig,
getFrontConfig,
getMainConfig,
getPaymentsConfig,
getExtensionsConfig,
getStylingConfig,
getCoreEditorConfig,
};