Split up webpack files for better readability (https://github.com/woocommerce/woocommerce-blocks/pull/2817)
* Split up webpack files for better readability * Fix storybook * Fix tests * update progress-bar-webpack-plugin and implement better feedback - updates progress-bar-webpack-plugin to latest version which includes more granular output of what webpack event is being processed. - Improve asset build complete summary to include what build was completed. * remove unnecessary s suffix * Add back package-lock Co-authored-by: Mike Jolley <mike.jolley@me.com> Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
This commit is contained in:
Albert Juhé Lluveras
GitHub
parent
9c1c075be9
commit
adfecb4259
|
|
@ -0,0 +1,541 @@
|
|||
/* eslint-disable no-console */
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
const path = require( 'path' );
|
||||
const MergeExtractFilesPlugin = require( './merge-extract-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 { NormalModuleReplacementPlugin } = require( 'webpack' );
|
||||
const WebpackRTLPlugin = require( 'webpack-rtl-plugin' );
|
||||
const chalk = require( 'chalk' );
|
||||
const { kebabCase } = require( 'lodash' );
|
||||
const CreateFileWebpack = require( 'create-file-webpack' );
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
const { getEntryConfig } = require( './webpack-entries' );
|
||||
const {
|
||||
NODE_ENV,
|
||||
requestToExternal,
|
||||
requestToHandle,
|
||||
findModuleMatch,
|
||||
} = require( './webpack-helpers' );
|
||||
|
||||
const dashIconReplacementModule = path.resolve(
|
||||
__dirname,
|
||||
'../assets/js/module_replacements/dashicon.js'
|
||||
);
|
||||
|
||||
const getCoreConfig = ( options = {} ) => {
|
||||
const isLegacy = options.fileSuffix && options.fileSuffix === 'legacy';
|
||||
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: /\.jsx?$/,
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: 'babel-loader?cacheDirectory',
|
||||
options: {
|
||||
presets: [ '@wordpress/babel-preset-default' ],
|
||||
plugins: [
|
||||
require.resolve(
|
||||
'@babel/plugin-proposal-class-properties'
|
||||
),
|
||||
].filter( Boolean ),
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
new ProgressBarPlugin( {
|
||||
format:
|
||||
chalk.blue( 'Building Core' ) +
|
||||
' [:bar] ' +
|
||||
chalk.green( ':percent' ) +
|
||||
' :msg (:elapsed seconds)',
|
||||
summary: false,
|
||||
customSummary: ( time ) => {
|
||||
const prefix = isLegacy ? 'Legacy' : '';
|
||||
console.log(
|
||||
chalk.green.bold(
|
||||
`${ prefix } Core assets build completed (${ time })`
|
||||
)
|
||||
);
|
||||
},
|
||||
} ),
|
||||
new DependencyExtractionWebpackPlugin( { injectPolyfill: true } ),
|
||||
new CreateFileWebpack( {
|
||||
path: './',
|
||||
// file name
|
||||
fileName: 'blocks.ini',
|
||||
// content of the file
|
||||
content: `woocommerce_blocks_phase = ${ process.env
|
||||
.WOOCOMMERCE_BLOCKS_PHASE || 3 }`,
|
||||
} ),
|
||||
],
|
||||
};
|
||||
};
|
||||
|
||||
const getMainConfig = ( options = {} ) => {
|
||||
let { fileSuffix } = options;
|
||||
const { alias, resolvePlugins = [] } = options;
|
||||
const isLegacy = fileSuffix === 'legacy';
|
||||
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',
|
||||
},
|
||||
optimization: {
|
||||
splitChunks: {
|
||||
minSize: 0,
|
||||
cacheGroups: {
|
||||
commons: {
|
||||
test: /[\\/]node_modules[\\/]/,
|
||||
name: 'vendors',
|
||||
chunks: 'all',
|
||||
enforce: true,
|
||||
},
|
||||
editor: {
|
||||
// Capture all `editor` stylesheets and the components stylesheets.
|
||||
test: ( module = {} ) =>
|
||||
module.constructor.name === 'CssModule' &&
|
||||
( findModuleMatch( module, /editor\.scss$/ ) ||
|
||||
findModuleMatch(
|
||||
module,
|
||||
/[\\/]assets[\\/]components[\\/]/
|
||||
) ),
|
||||
name: 'editor',
|
||||
chunks: 'all',
|
||||
priority: 10,
|
||||
},
|
||||
'vendors-style': {
|
||||
test: /\/node_modules\/.*?style\.s?css$/,
|
||||
name: 'vendors-style',
|
||||
chunks: 'all',
|
||||
priority: 7,
|
||||
},
|
||||
style: {
|
||||
test: /style\.scss$/,
|
||||
name: 'style',
|
||||
chunks: 'all',
|
||||
priority: 5,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.jsx?$/,
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: 'babel-loader?cacheDirectory',
|
||||
options: {
|
||||
presets: [ '@wordpress/babel-preset-default' ],
|
||||
plugins: [
|
||||
NODE_ENV === 'production'
|
||||
? require.resolve(
|
||||
'babel-plugin-transform-react-remove-prop-types'
|
||||
)
|
||||
: false,
|
||||
require.resolve(
|
||||
'@babel/plugin-proposal-class-properties'
|
||||
),
|
||||
].filter( Boolean ),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\/node_modules\/.*?style\.s?css$/,
|
||||
use: [
|
||||
MiniCssExtractPlugin.loader,
|
||||
{ loader: 'css-loader', options: { importLoaders: 1 } },
|
||||
'postcss-loader',
|
||||
{
|
||||
loader: 'sass-loader',
|
||||
query: {
|
||||
includePaths: [ 'node_modules' ],
|
||||
data: [
|
||||
'colors',
|
||||
'breakpoints',
|
||||
'variables',
|
||||
'mixins',
|
||||
'animations',
|
||||
'z-index',
|
||||
]
|
||||
.map(
|
||||
( imported ) =>
|
||||
`@import "~@wordpress/base-styles/${ imported }";`
|
||||
)
|
||||
.join( ' ' ),
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.s?css$/,
|
||||
exclude: /node_modules/,
|
||||
use: [
|
||||
MiniCssExtractPlugin.loader,
|
||||
{ loader: 'css-loader', options: { importLoaders: 1 } },
|
||||
'postcss-loader',
|
||||
{
|
||||
loader: 'sass-loader',
|
||||
query: {
|
||||
includePaths: [
|
||||
'assets/css/abstracts',
|
||||
'node_modules',
|
||||
],
|
||||
data: [
|
||||
'_colors',
|
||||
'_variables',
|
||||
'_breakpoints',
|
||||
'_mixins',
|
||||
]
|
||||
.map(
|
||||
( imported ) =>
|
||||
`@import "${ imported }";`
|
||||
)
|
||||
.join( ' ' ),
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
new WebpackRTLPlugin( {
|
||||
filename: `[name]${ fileSuffix }-rtl.css`,
|
||||
minify: {
|
||||
safe: true,
|
||||
},
|
||||
} ),
|
||||
new MiniCssExtractPlugin( {
|
||||
filename: `[name]${ fileSuffix }.css`,
|
||||
} ),
|
||||
new MergeExtractFilesPlugin(
|
||||
[
|
||||
`build/editor${ fileSuffix }.js`,
|
||||
`build/style${ fileSuffix }.js`,
|
||||
],
|
||||
`build/vendors${ fileSuffix }.js`
|
||||
),
|
||||
new ProgressBarPlugin( {
|
||||
format:
|
||||
chalk.blue( 'Building Main' ) +
|
||||
' [:bar] ' +
|
||||
chalk.green( ':percent' ) +
|
||||
' :msg (:elapsed seconds)',
|
||||
summary: false,
|
||||
customSummary: ( time ) => {
|
||||
const prefix = isLegacy ? 'Legacy' : '';
|
||||
console.log(
|
||||
chalk.green.bold(
|
||||
`${ prefix } Main assets build completed (${ time })`
|
||||
)
|
||||
);
|
||||
},
|
||||
} ),
|
||||
new DependencyExtractionWebpackPlugin( {
|
||||
injectPolyfill: true,
|
||||
requestToExternal,
|
||||
requestToHandle,
|
||||
} ),
|
||||
new NormalModuleReplacementPlugin(
|
||||
/dashicon/,
|
||||
( result ) => ( result.resource = dashIconReplacementModule )
|
||||
),
|
||||
],
|
||||
resolve,
|
||||
};
|
||||
};
|
||||
|
||||
const getFrontConfig = ( options = {} ) => {
|
||||
let { fileSuffix } = options;
|
||||
const { alias, resolvePlugins = [] } = options;
|
||||
const isLegacy = fileSuffix === 'legacy';
|
||||
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: /\.jsx?$/,
|
||||
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'
|
||||
),
|
||||
NODE_ENV === 'production'
|
||||
? require.resolve(
|
||||
'babel-plugin-transform-react-remove-prop-types'
|
||||
)
|
||||
: false,
|
||||
].filter( Boolean ),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.s[c|a]ss$/,
|
||||
use: {
|
||||
loader: 'ignore-loader',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
new ProgressBarPlugin( {
|
||||
format:
|
||||
chalk.blue( 'Building Frontend' ) +
|
||||
' [:bar] ' +
|
||||
chalk.green( ':percent' ) +
|
||||
' :msg (:elapsed seconds)',
|
||||
summary: false,
|
||||
customSummary: ( time ) => {
|
||||
const prefix = isLegacy ? 'Legacy' : '';
|
||||
console.log(
|
||||
chalk.green.bold(
|
||||
`${ prefix } Frontend assets build completed (${ time })`
|
||||
)
|
||||
);
|
||||
},
|
||||
} ),
|
||||
new DependencyExtractionWebpackPlugin( {
|
||||
injectPolyfill: true,
|
||||
requestToExternal,
|
||||
requestToHandle,
|
||||
} ),
|
||||
new NormalModuleReplacementPlugin(
|
||||
/dashicon/,
|
||||
( result ) => ( result.resource = dashIconReplacementModule )
|
||||
),
|
||||
],
|
||||
resolve,
|
||||
};
|
||||
};
|
||||
|
||||
const getPaymentsConfig = ( options = {} ) => {
|
||||
const { alias, resolvePlugins = [] } = options;
|
||||
const isLegacy = options.fileSuffix && options.fileSuffix === 'legacy';
|
||||
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: /\.jsx?$/,
|
||||
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'
|
||||
),
|
||||
NODE_ENV === 'production'
|
||||
? require.resolve(
|
||||
'babel-plugin-transform-react-remove-prop-types'
|
||||
)
|
||||
: false,
|
||||
].filter( Boolean ),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.s?css$/,
|
||||
exclude: /node_modules/,
|
||||
use: [
|
||||
MiniCssExtractPlugin.loader,
|
||||
{ loader: 'css-loader', options: { importLoaders: 1 } },
|
||||
'postcss-loader',
|
||||
{
|
||||
loader: 'sass-loader',
|
||||
query: {
|
||||
includePaths: [
|
||||
'assets/css/abstracts',
|
||||
'node_modules',
|
||||
],
|
||||
data: [
|
||||
'_colors',
|
||||
'_variables',
|
||||
'_breakpoints',
|
||||
'_mixins',
|
||||
]
|
||||
.map(
|
||||
( imported ) =>
|
||||
`@import "${ imported }";`
|
||||
)
|
||||
.join( ' ' ),
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
new WebpackRTLPlugin( {
|
||||
filename: `[name]-rtl.css`,
|
||||
minify: {
|
||||
safe: true,
|
||||
},
|
||||
} ),
|
||||
new MiniCssExtractPlugin( {
|
||||
filename: `[name].css`,
|
||||
} ),
|
||||
new ProgressBarPlugin( {
|
||||
format:
|
||||
chalk.blue( 'Building Payment Method Extensions' ) +
|
||||
' [:bar] ' +
|
||||
chalk.green( ':percent' ) +
|
||||
' :msg (:elapsed seconds)',
|
||||
summary: false,
|
||||
customSummary: ( time ) => {
|
||||
const prefix = isLegacy ? 'Legacy' : '';
|
||||
console.log(
|
||||
chalk.green.bold(
|
||||
`${ prefix } Payment Method Extension assets build completed (${ time })`
|
||||
)
|
||||
);
|
||||
},
|
||||
} ),
|
||||
new DependencyExtractionWebpackPlugin( {
|
||||
injectPolyfill: true,
|
||||
requestToExternal,
|
||||
requestToHandle,
|
||||
} ),
|
||||
new NormalModuleReplacementPlugin(
|
||||
/dashicon/,
|
||||
( result ) => ( result.resource = dashIconReplacementModule )
|
||||
),
|
||||
],
|
||||
resolve,
|
||||
};
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
getCoreConfig,
|
||||
getFrontConfig,
|
||||
getMainConfig,
|
||||
getPaymentsConfig,
|
||||
};
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
const { omit } = require( 'lodash' );
|
||||
|
||||
const stable = {
|
||||
core: {
|
||||
wcBlocksRegistry: './assets/js/blocks-registry/index.js',
|
||||
wcSettings: './assets/js/settings/shared/index.js',
|
||||
wcBlocksData: './assets/js/data/index.js',
|
||||
wcBlocksMiddleware: './assets/js/middleware/index.js',
|
||||
wcSharedContext: './assets/js/shared/context/index.js',
|
||||
},
|
||||
main: {
|
||||
// Shared blocks code
|
||||
blocks: './assets/js/index.js',
|
||||
|
||||
// @wordpress/components styles
|
||||
'custom-select-control-style':
|
||||
'./node_modules/wordpress-components/src/custom-select-control/style.scss',
|
||||
'spinner-style':
|
||||
'./node_modules/wordpress-components/src/spinner/style.scss',
|
||||
'snackbar-notice-style':
|
||||
'./node_modules/wordpress-components/src/snackbar/style.scss',
|
||||
|
||||
// Styles for grid blocks. WP <=5.2 doesn't have the All Products block,
|
||||
// so this file would not be included if not explicitly declared here.
|
||||
// This file is excluded from the default build so CSS styles are included
|
||||
// in the other the components are imported.
|
||||
'product-list-style':
|
||||
'./assets/js/base/components/product-list/style.scss',
|
||||
|
||||
// Blocks
|
||||
'handpicked-products':
|
||||
'./assets/js/blocks/handpicked-products/index.js',
|
||||
'product-best-sellers':
|
||||
'./assets/js/blocks/product-best-sellers/index.js',
|
||||
'product-category': './assets/js/blocks/product-category/index.js',
|
||||
'product-categories': './assets/js/blocks/product-categories/index.js',
|
||||
'product-new': './assets/js/blocks/product-new/index.js',
|
||||
'product-on-sale': './assets/js/blocks/product-on-sale/index.js',
|
||||
'product-top-rated': './assets/js/blocks/product-top-rated/index.js',
|
||||
'products-by-attribute':
|
||||
'./assets/js/blocks/products-by-attribute/index.js',
|
||||
'featured-product': './assets/js/blocks/featured-product/index.js',
|
||||
'all-reviews': './assets/js/blocks/reviews/all-reviews/index.js',
|
||||
'reviews-by-product':
|
||||
'./assets/js/blocks/reviews/reviews-by-product/index.js',
|
||||
'reviews-by-category':
|
||||
'./assets/js/blocks/reviews/reviews-by-category/index.js',
|
||||
'product-search': './assets/js/blocks/product-search/index.js',
|
||||
'product-tag': './assets/js/blocks/product-tag/index.js',
|
||||
'featured-category': './assets/js/blocks/featured-category/index.js',
|
||||
'all-products': './assets/js/blocks/products/all-products/index.js',
|
||||
'price-filter': './assets/js/blocks/price-filter/index.js',
|
||||
'attribute-filter': './assets/js/blocks/attribute-filter/index.js',
|
||||
'active-filters': './assets/js/blocks/active-filters/index.js',
|
||||
'block-error-boundary':
|
||||
'./assets/js/base/components/block-error-boundary/style.scss',
|
||||
cart: './assets/js/blocks/cart-checkout/cart/index.js',
|
||||
checkout: './assets/js/blocks/cart-checkout/checkout/index.js',
|
||||
},
|
||||
frontend: {
|
||||
reviews: './assets/js/blocks/reviews/frontend.js',
|
||||
'all-products': './assets/js/blocks/products/all-products/frontend.js',
|
||||
'price-filter': './assets/js/blocks/price-filter/frontend.js',
|
||||
'attribute-filter': './assets/js/blocks/attribute-filter/frontend.js',
|
||||
'active-filters': './assets/js/blocks/active-filters/frontend.js',
|
||||
cart: './assets/js/blocks/cart-checkout/cart/frontend.js',
|
||||
checkout: './assets/js/blocks/cart-checkout/checkout/frontend.js',
|
||||
},
|
||||
payments: {
|
||||
'wc-payment-method-stripe':
|
||||
'./assets/js/payment-method-extensions/payment-methods/stripe/index.js',
|
||||
'wc-payment-method-cheque':
|
||||
'./assets/js/payment-method-extensions/payment-methods/cheque/index.js',
|
||||
'wc-payment-method-paypal':
|
||||
'./assets/js/payment-method-extensions/payment-methods/paypal/index.js',
|
||||
},
|
||||
};
|
||||
|
||||
const experimental = {
|
||||
core: {},
|
||||
main: {
|
||||
'single-product': './assets/js/blocks/single-product/index.js',
|
||||
},
|
||||
frontend: {
|
||||
'single-product': './assets/js/blocks/single-product/frontend.js',
|
||||
},
|
||||
payments: {},
|
||||
};
|
||||
|
||||
const getEntryConfig = ( type = 'main', exclude = [] ) => {
|
||||
return omit(
|
||||
parseInt( process.env.WOOCOMMERCE_BLOCKS_PHASE, 10 ) < 3
|
||||
? stable[ type ]
|
||||
: { ...stable[ type ], ...experimental[ type ] },
|
||||
exclude
|
||||
);
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
getEntryConfig,
|
||||
};
|
||||
|
|
@ -2,53 +2,23 @@
|
|||
* External dependencies
|
||||
*/
|
||||
const path = require( 'path' );
|
||||
const MergeExtractFilesPlugin = require( './merge-extract-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 { NormalModuleReplacementPlugin } = require( 'webpack' );
|
||||
const WebpackRTLPlugin = require( 'webpack-rtl-plugin' );
|
||||
const chalk = require( 'chalk' );
|
||||
const { omit } = require( 'lodash' );
|
||||
|
||||
const NODE_ENV = process.env.NODE_ENV || 'development';
|
||||
const FORCE_MAP = process.env.FORCE_MAP || false;
|
||||
|
||||
const dashIconReplacementModule = path.resolve(
|
||||
__dirname,
|
||||
'../assets/js/module_replacements/dashicon.js'
|
||||
);
|
||||
|
||||
function findModuleMatch( module, match ) {
|
||||
if ( module.request && match.test( module.request ) ) {
|
||||
return true;
|
||||
} else if ( module.issuer ) {
|
||||
return findModuleMatch( module.issuer, match );
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
const requestToExternal = ( request ) => {
|
||||
const wcDepMap = {
|
||||
'@woocommerce/blocks-registry': [ 'wc', 'wcBlocksRegistry' ],
|
||||
'@woocommerce/settings': [ 'wc', 'wcSettings' ],
|
||||
'@woocommerce/block-data': [ 'wc', 'wcBlocksData' ],
|
||||
'@woocommerce/shared-context': [ 'wc', 'wcSharedContext' ],
|
||||
};
|
||||
if ( wcDepMap[ request ] ) {
|
||||
return wcDepMap[ request ];
|
||||
}
|
||||
const wcDepMap = {
|
||||
'@woocommerce/blocks-registry': [ 'wc', 'wcBlocksRegistry' ],
|
||||
'@woocommerce/settings': [ 'wc', 'wcSettings' ],
|
||||
'@woocommerce/block-data': [ 'wc', 'wcBlocksData' ],
|
||||
'@woocommerce/shared-context': [ 'wc', 'wcSharedContext' ],
|
||||
};
|
||||
|
||||
const requestToHandle = ( request ) => {
|
||||
const wcHandleMap = {
|
||||
'@woocommerce/blocks-registry': 'wc-blocks-registry',
|
||||
'@woocommerce/settings': 'wc-settings',
|
||||
'@woocommerce/block-settings': 'wc-settings',
|
||||
'@woocommerce/block-data': 'wc-blocks-data-store',
|
||||
'@woocommerce/shared-context': 'wc-shared-context',
|
||||
};
|
||||
if ( wcHandleMap[ request ] ) {
|
||||
return wcHandleMap[ request ];
|
||||
}
|
||||
const wcHandleMap = {
|
||||
'@woocommerce/blocks-registry': 'wc-blocks-registry',
|
||||
'@woocommerce/settings': 'wc-settings',
|
||||
'@woocommerce/block-settings': 'wc-settings',
|
||||
'@woocommerce/block-data': 'wc-blocks-data-store',
|
||||
'@woocommerce/shared-context': 'wc-shared-context',
|
||||
};
|
||||
|
||||
const getAlias = ( options = {} ) => {
|
||||
|
|
@ -111,507 +81,32 @@ const getAlias = ( options = {} ) => {
|
|||
};
|
||||
};
|
||||
|
||||
const stableMainEntry = {
|
||||
// Shared blocks code
|
||||
blocks: './assets/js/index.js',
|
||||
function findModuleMatch( module, match ) {
|
||||
if ( module.request && match.test( module.request ) ) {
|
||||
return true;
|
||||
} else if ( module.issuer ) {
|
||||
return findModuleMatch( module.issuer, match );
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// @wordpress/components styles
|
||||
'custom-select-control-style':
|
||||
'./node_modules/wordpress-components/src/custom-select-control/style.scss',
|
||||
'spinner-style':
|
||||
'./node_modules/wordpress-components/src/spinner/style.scss',
|
||||
'snackbar-notice-style':
|
||||
'./node_modules/wordpress-components/src/snackbar/style.scss',
|
||||
|
||||
// Styles for grid blocks. WP <=5.2 doesn't have the All Products block,
|
||||
// so this file would not be included if not explicitly declared here.
|
||||
// This file is excluded from the default build so CSS styles are included
|
||||
// in the other the components are imported.
|
||||
'product-list-style': './assets/js/base/components/product-list/style.scss',
|
||||
|
||||
// Blocks
|
||||
'handpicked-products': './assets/js/blocks/handpicked-products/index.js',
|
||||
'product-best-sellers': './assets/js/blocks/product-best-sellers/index.js',
|
||||
'product-category': './assets/js/blocks/product-category/index.js',
|
||||
'product-categories': './assets/js/blocks/product-categories/index.js',
|
||||
'product-new': './assets/js/blocks/product-new/index.js',
|
||||
'product-on-sale': './assets/js/blocks/product-on-sale/index.js',
|
||||
'product-top-rated': './assets/js/blocks/product-top-rated/index.js',
|
||||
'products-by-attribute':
|
||||
'./assets/js/blocks/products-by-attribute/index.js',
|
||||
'featured-product': './assets/js/blocks/featured-product/index.js',
|
||||
'all-reviews': './assets/js/blocks/reviews/all-reviews/index.js',
|
||||
'reviews-by-product':
|
||||
'./assets/js/blocks/reviews/reviews-by-product/index.js',
|
||||
'reviews-by-category':
|
||||
'./assets/js/blocks/reviews/reviews-by-category/index.js',
|
||||
'product-search': './assets/js/blocks/product-search/index.js',
|
||||
'product-tag': './assets/js/blocks/product-tag/index.js',
|
||||
'featured-category': './assets/js/blocks/featured-category/index.js',
|
||||
'all-products': './assets/js/blocks/products/all-products/index.js',
|
||||
'price-filter': './assets/js/blocks/price-filter/index.js',
|
||||
'attribute-filter': './assets/js/blocks/attribute-filter/index.js',
|
||||
'active-filters': './assets/js/blocks/active-filters/index.js',
|
||||
'block-error-boundary':
|
||||
'./assets/js/base/components/block-error-boundary/style.scss',
|
||||
cart: './assets/js/blocks/cart-checkout/cart/index.js',
|
||||
checkout: './assets/js/blocks/cart-checkout/checkout/index.js',
|
||||
const requestToExternal = ( request ) => {
|
||||
if ( wcDepMap[ request ] ) {
|
||||
return wcDepMap[ request ];
|
||||
}
|
||||
};
|
||||
|
||||
const experimentalMainEntry = {
|
||||
'single-product': './assets/js/blocks/single-product/index.js',
|
||||
};
|
||||
|
||||
const mainEntry =
|
||||
// env variables are strings, so we compare against a string, so we need to parse it.
|
||||
parseInt( process.env.WOOCOMMERCE_BLOCKS_PHASE, 10 ) < 3
|
||||
? stableMainEntry
|
||||
: { ...stableMainEntry, ...experimentalMainEntry };
|
||||
|
||||
const stableFrontEndEntry = {
|
||||
reviews: './assets/js/blocks/reviews/frontend.js',
|
||||
'all-products': './assets/js/blocks/products/all-products/frontend.js',
|
||||
'price-filter': './assets/js/blocks/price-filter/frontend.js',
|
||||
'attribute-filter': './assets/js/blocks/attribute-filter/frontend.js',
|
||||
'active-filters': './assets/js/blocks/active-filters/frontend.js',
|
||||
cart: './assets/js/blocks/cart-checkout/cart/frontend.js',
|
||||
checkout: './assets/js/blocks/cart-checkout/checkout/frontend.js',
|
||||
};
|
||||
|
||||
const experimentalFrontEndEntry = {
|
||||
'single-product': './assets/js/blocks/single-product/frontend.js',
|
||||
};
|
||||
|
||||
const frontEndEntry =
|
||||
// env variables are strings, so we compare against a string, so we need to parse it.
|
||||
parseInt( process.env.WOOCOMMERCE_BLOCKS_PHASE, 10 ) < 3
|
||||
? stableFrontEndEntry
|
||||
: { ...stableFrontEndEntry, ...experimentalFrontEndEntry };
|
||||
|
||||
const getEntryConfig = ( main = true, exclude = [] ) => {
|
||||
const entryConfig = main ? mainEntry : frontEndEntry;
|
||||
return omit( entryConfig, exclude );
|
||||
};
|
||||
|
||||
const getMainConfig = ( options = {} ) => {
|
||||
let { fileSuffix } = options;
|
||||
const { alias, resolvePlugins = [] } = options;
|
||||
fileSuffix = fileSuffix ? `-${ fileSuffix }` : '';
|
||||
const resolve = alias
|
||||
? {
|
||||
alias,
|
||||
plugins: resolvePlugins,
|
||||
}
|
||||
: {
|
||||
plugins: resolvePlugins,
|
||||
};
|
||||
return {
|
||||
entry: getEntryConfig( true, 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',
|
||||
},
|
||||
optimization: {
|
||||
splitChunks: {
|
||||
minSize: 0,
|
||||
cacheGroups: {
|
||||
commons: {
|
||||
test: /[\\/]node_modules[\\/]/,
|
||||
name: 'vendors',
|
||||
chunks: 'all',
|
||||
enforce: true,
|
||||
},
|
||||
editor: {
|
||||
// Capture all `editor` stylesheets and the components stylesheets.
|
||||
test: ( module = {} ) =>
|
||||
module.constructor.name === 'CssModule' &&
|
||||
( findModuleMatch( module, /editor\.scss$/ ) ||
|
||||
findModuleMatch(
|
||||
module,
|
||||
/[\\/]assets[\\/]components[\\/]/
|
||||
) ),
|
||||
name: 'editor',
|
||||
chunks: 'all',
|
||||
priority: 10,
|
||||
},
|
||||
'vendors-style': {
|
||||
test: /\/node_modules\/.*?style\.s?css$/,
|
||||
name: 'vendors-style',
|
||||
chunks: 'all',
|
||||
priority: 7,
|
||||
},
|
||||
style: {
|
||||
test: /style\.scss$/,
|
||||
name: 'style',
|
||||
chunks: 'all',
|
||||
priority: 5,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.jsx?$/,
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: 'babel-loader?cacheDirectory',
|
||||
options: {
|
||||
presets: [ '@wordpress/babel-preset-default' ],
|
||||
plugins: [
|
||||
NODE_ENV === 'production'
|
||||
? require.resolve(
|
||||
'babel-plugin-transform-react-remove-prop-types'
|
||||
)
|
||||
: false,
|
||||
require.resolve(
|
||||
'@babel/plugin-proposal-class-properties'
|
||||
),
|
||||
].filter( Boolean ),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\/node_modules\/.*?style\.s?css$/,
|
||||
use: [
|
||||
MiniCssExtractPlugin.loader,
|
||||
{ loader: 'css-loader', options: { importLoaders: 1 } },
|
||||
'postcss-loader',
|
||||
{
|
||||
loader: 'sass-loader',
|
||||
query: {
|
||||
includePaths: [ 'node_modules' ],
|
||||
data: [
|
||||
'colors',
|
||||
'breakpoints',
|
||||
'variables',
|
||||
'mixins',
|
||||
'animations',
|
||||
'z-index',
|
||||
]
|
||||
.map(
|
||||
( imported ) =>
|
||||
`@import "~@wordpress/base-styles/${ imported }";`
|
||||
)
|
||||
.join( ' ' ),
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.s?css$/,
|
||||
exclude: /node_modules/,
|
||||
use: [
|
||||
MiniCssExtractPlugin.loader,
|
||||
{ loader: 'css-loader', options: { importLoaders: 1 } },
|
||||
'postcss-loader',
|
||||
{
|
||||
loader: 'sass-loader',
|
||||
query: {
|
||||
includePaths: [
|
||||
'assets/css/abstracts',
|
||||
'node_modules',
|
||||
],
|
||||
data: [
|
||||
'_colors',
|
||||
'_variables',
|
||||
'_breakpoints',
|
||||
'_mixins',
|
||||
]
|
||||
.map(
|
||||
( imported ) =>
|
||||
`@import "${ imported }";`
|
||||
)
|
||||
.join( ' ' ),
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
new WebpackRTLPlugin( {
|
||||
filename: `[name]${ fileSuffix }-rtl.css`,
|
||||
minify: {
|
||||
safe: true,
|
||||
},
|
||||
} ),
|
||||
new MiniCssExtractPlugin( {
|
||||
filename: `[name]${ fileSuffix }.css`,
|
||||
} ),
|
||||
new MergeExtractFilesPlugin(
|
||||
[
|
||||
`build/editor${ fileSuffix }.js`,
|
||||
`build/style${ fileSuffix }.js`,
|
||||
],
|
||||
`build/vendors${ fileSuffix }.js`
|
||||
),
|
||||
new ProgressBarPlugin( {
|
||||
format:
|
||||
chalk.blue( 'Build' ) +
|
||||
' [:bar] ' +
|
||||
chalk.green( ':percent' ) +
|
||||
' :msg (:elapsed seconds)',
|
||||
} ),
|
||||
new DependencyExtractionWebpackPlugin( {
|
||||
injectPolyfill: true,
|
||||
requestToExternal,
|
||||
requestToHandle,
|
||||
} ),
|
||||
new NormalModuleReplacementPlugin(
|
||||
/dashicon/,
|
||||
( result ) => ( result.resource = dashIconReplacementModule )
|
||||
),
|
||||
],
|
||||
resolve,
|
||||
};
|
||||
};
|
||||
|
||||
const getFrontConfig = ( options = {} ) => {
|
||||
let { fileSuffix } = options;
|
||||
const { alias, resolvePlugins = [] } = options;
|
||||
fileSuffix = fileSuffix ? `-${ fileSuffix }` : '';
|
||||
const resolve = alias
|
||||
? {
|
||||
alias,
|
||||
plugins: resolvePlugins,
|
||||
}
|
||||
: {
|
||||
plugins: resolvePlugins,
|
||||
};
|
||||
return {
|
||||
entry: getEntryConfig( false, 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: /\.jsx?$/,
|
||||
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'
|
||||
),
|
||||
NODE_ENV === 'production'
|
||||
? require.resolve(
|
||||
'babel-plugin-transform-react-remove-prop-types'
|
||||
)
|
||||
: false,
|
||||
].filter( Boolean ),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.s[c|a]ss$/,
|
||||
use: {
|
||||
loader: 'ignore-loader',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
new ProgressBarPlugin( {
|
||||
format:
|
||||
chalk.blue( 'Build frontend scripts' ) +
|
||||
' [:bar] ' +
|
||||
chalk.green( ':percent' ) +
|
||||
' :msg (:elapsed seconds)',
|
||||
} ),
|
||||
new DependencyExtractionWebpackPlugin( {
|
||||
injectPolyfill: true,
|
||||
requestToExternal,
|
||||
requestToHandle,
|
||||
} ),
|
||||
new NormalModuleReplacementPlugin(
|
||||
/dashicon/,
|
||||
( result ) => ( result.resource = dashIconReplacementModule )
|
||||
),
|
||||
],
|
||||
resolve,
|
||||
};
|
||||
};
|
||||
|
||||
const getPaymentMethodsExtensionConfig = ( options = {} ) => {
|
||||
const { alias, resolvePlugins = [] } = options;
|
||||
const resolve = alias
|
||||
? {
|
||||
alias,
|
||||
plugins: resolvePlugins,
|
||||
}
|
||||
: {
|
||||
plugins: resolvePlugins,
|
||||
};
|
||||
return {
|
||||
entry: {
|
||||
'wc-payment-method-stripe':
|
||||
'./assets/js/payment-method-extensions/payment-methods/stripe/index.js',
|
||||
'wc-payment-method-cheque':
|
||||
'./assets/js/payment-method-extensions/payment-methods/cheque/index.js',
|
||||
'wc-payment-method-paypal':
|
||||
'./assets/js/payment-method-extensions/payment-methods/paypal/index.js',
|
||||
},
|
||||
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: /\.jsx?$/,
|
||||
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'
|
||||
),
|
||||
NODE_ENV === 'production'
|
||||
? require.resolve(
|
||||
'babel-plugin-transform-react-remove-prop-types'
|
||||
)
|
||||
: false,
|
||||
].filter( Boolean ),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.s?css$/,
|
||||
exclude: /node_modules/,
|
||||
use: [
|
||||
MiniCssExtractPlugin.loader,
|
||||
{ loader: 'css-loader', options: { importLoaders: 1 } },
|
||||
'postcss-loader',
|
||||
{
|
||||
loader: 'sass-loader',
|
||||
query: {
|
||||
includePaths: [
|
||||
'assets/css/abstracts',
|
||||
'node_modules',
|
||||
],
|
||||
data: [
|
||||
'_colors',
|
||||
'_variables',
|
||||
'_breakpoints',
|
||||
'_mixins',
|
||||
]
|
||||
.map(
|
||||
( imported ) =>
|
||||
`@import "${ imported }";`
|
||||
)
|
||||
.join( ' ' ),
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
new WebpackRTLPlugin( {
|
||||
filename: `[name]-rtl.css`,
|
||||
minify: {
|
||||
safe: true,
|
||||
},
|
||||
} ),
|
||||
new MiniCssExtractPlugin( {
|
||||
filename: `[name].css`,
|
||||
} ),
|
||||
new ProgressBarPlugin( {
|
||||
format:
|
||||
chalk.blue( 'Build payment method extension scripts' ) +
|
||||
' [:bar] ' +
|
||||
chalk.green( ':percent' ) +
|
||||
' :msg (:elapsed seconds)',
|
||||
} ),
|
||||
new DependencyExtractionWebpackPlugin( {
|
||||
injectPolyfill: true,
|
||||
requestToExternal,
|
||||
requestToHandle,
|
||||
} ),
|
||||
new NormalModuleReplacementPlugin(
|
||||
/dashicon/,
|
||||
( result ) => ( result.resource = dashIconReplacementModule )
|
||||
),
|
||||
],
|
||||
resolve,
|
||||
};
|
||||
const requestToHandle = ( request ) => {
|
||||
if ( wcHandleMap[ request ] ) {
|
||||
return wcHandleMap[ request ];
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
NODE_ENV,
|
||||
FORCE_MAP,
|
||||
getAlias,
|
||||
getFrontConfig,
|
||||
getMainConfig,
|
||||
getPaymentMethodsExtensionConfig,
|
||||
findModuleMatch,
|
||||
requestToHandle,
|
||||
requestToExternal,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -16262,16 +16262,6 @@
|
|||
"integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
|
||||
"dev": true
|
||||
},
|
||||
"clean-webpack-plugin": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/clean-webpack-plugin/-/clean-webpack-plugin-3.0.0.tgz",
|
||||
"integrity": "sha512-MciirUH5r+cYLGCOL5JX/ZLzOZbVr1ot3Fw+KcvbhUb6PM+yycqd9ZhIlcigQ5gl+XhppNmw3bEFuaaMNyLj3A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/webpack": "^4.4.31",
|
||||
"del": "^4.1.1"
|
||||
}
|
||||
},
|
||||
"cli-boxes": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-2.2.0.tgz",
|
||||
|
|
@ -17807,59 +17797,6 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"del": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/del/-/del-4.1.1.tgz",
|
||||
"integrity": "sha512-QwGuEUouP2kVwQenAsOof5Fv8K9t3D8Ca8NxcXKrIpEHjTXK5J2nXLdP+ALI1cgv8wj7KuwBhTwBkOZSJKM5XQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/glob": "^7.1.1",
|
||||
"globby": "^6.1.0",
|
||||
"is-path-cwd": "^2.0.0",
|
||||
"is-path-in-cwd": "^2.0.0",
|
||||
"p-map": "^2.0.0",
|
||||
"pify": "^4.0.1",
|
||||
"rimraf": "^2.6.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"globby": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
|
||||
"integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"array-union": "^1.0.1",
|
||||
"glob": "^7.0.3",
|
||||
"object-assign": "^4.0.1",
|
||||
"pify": "^2.0.0",
|
||||
"pinkie-promise": "^2.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"pify": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
|
||||
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"p-map": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/p-map/-/p-map-2.1.0.tgz",
|
||||
"integrity": "sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==",
|
||||
"dev": true
|
||||
},
|
||||
"rimraf": {
|
||||
"version": "2.7.1",
|
||||
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
|
||||
"integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"glob": "^7.1.3"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"delayed-stream": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
||||
|
|
@ -22654,24 +22591,6 @@
|
|||
"integrity": "sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==",
|
||||
"dev": true
|
||||
},
|
||||
"is-path-in-cwd": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/is-path-in-cwd/-/is-path-in-cwd-2.1.0.tgz",
|
||||
"integrity": "sha512-rNocXHgipO+rvnP6dk3zI20RpOtrAM/kzbB258Uw5BWr3TpXi861yzjo16Dn4hUox07iw5AyeMLHWsujkjzvRQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"is-path-inside": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"is-path-inside": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-2.1.0.tgz",
|
||||
"integrity": "sha512-wiyhTzfDWsvwAW53OBWF5zuvaOGlZ6PwYxAbPVDhpm+gM09xKQGjBq/8uYN12aDvMxnAnq3dxTyoSoRNmg5YFg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"path-is-inside": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"is-plain-obj": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
|
||||
|
|
@ -31930,12 +31849,6 @@
|
|||
"integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
|
||||
"dev": true
|
||||
},
|
||||
"path-is-inside": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz",
|
||||
"integrity": "sha1-NlQX3t5EQw0cEa9hAn+s8HS9/FM=",
|
||||
"dev": true
|
||||
},
|
||||
"path-key": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
|
||||
|
|
@ -33107,62 +33020,13 @@
|
|||
"dev": true
|
||||
},
|
||||
"progress-bar-webpack-plugin": {
|
||||
"version": "1.12.1",
|
||||
"resolved": "https://registry.npmjs.org/progress-bar-webpack-plugin/-/progress-bar-webpack-plugin-1.12.1.tgz",
|
||||
"integrity": "sha512-tVbPB5xBbqNwdH3mwcxzjL1r1Vrm/xGu93OsqVSAbCaXGoKFvfWIh0gpMDpn2kYsPVRSAIK0pBkP9Vfs+JJibQ==",
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/progress-bar-webpack-plugin/-/progress-bar-webpack-plugin-2.1.0.tgz",
|
||||
"integrity": "sha512-UtlZbnxpYk1wufEWfhIjRn2U52zlY38uvnzFhs8rRxJxC1hSqw88JNR2Mbpqq9Kix8L1nGb3uQ+/1BiUWbigAg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chalk": "^1.1.1",
|
||||
"object.assign": "^4.0.1",
|
||||
"progress": "^1.1.8"
|
||||
},
|
||||
"dependencies": {
|
||||
"ansi-regex": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
|
||||
"integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
|
||||
"dev": true
|
||||
},
|
||||
"ansi-styles": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
|
||||
"integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
|
||||
"dev": true
|
||||
},
|
||||
"chalk": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
|
||||
"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ansi-styles": "^2.2.1",
|
||||
"escape-string-regexp": "^1.0.2",
|
||||
"has-ansi": "^2.0.0",
|
||||
"strip-ansi": "^3.0.0",
|
||||
"supports-color": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"progress": {
|
||||
"version": "1.1.8",
|
||||
"resolved": "https://registry.npmjs.org/progress/-/progress-1.1.8.tgz",
|
||||
"integrity": "sha1-4mDHj2Fhzdmw5WzD4Khd4Xx6V74=",
|
||||
"dev": true
|
||||
},
|
||||
"strip-ansi": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
|
||||
"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
|
||||
"integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
|
||||
"dev": true
|
||||
}
|
||||
"chalk": "^3.0.0",
|
||||
"progress": "^2.0.3"
|
||||
}
|
||||
},
|
||||
"promise": {
|
||||
|
|
|
|||
|
|
@ -24,13 +24,13 @@
|
|||
},
|
||||
"license": "GPL-3.0+",
|
||||
"scripts": {
|
||||
"build": "cross-env BABEL_ENV=default NODE_ENV=production webpack",
|
||||
"build": "rimraf build/* && cross-env BABEL_ENV=default NODE_ENV=production webpack",
|
||||
"build:e2e-test": "npm run build",
|
||||
"build:map": "cross-env BABEL_ENV=default NODE_ENV=production FORCE_MAP=true webpack",
|
||||
"changelog": "node ./bin/changelog",
|
||||
"changelog:zenhub": "node ./bin/changelog --changelogSrcType='ZENHUB_RELEASE'",
|
||||
"deploy": "cross-env WOOCOMMERCE_BLOCKS_PHASE=2 composer install --no-dev && npm run build --loglevel error && sh ./bin/github-deploy.sh",
|
||||
"dev": "cross-env BABEL_ENV=default webpack",
|
||||
"dev": "rimraf build/* && cross-env BABEL_ENV=default webpack",
|
||||
"explore": "source-map-explorer",
|
||||
"lint": "npm run lint:php && npm run lint:css && npm run lint:js",
|
||||
"lint:ci": "npm run lint:js && npm run lint:css",
|
||||
|
|
@ -110,7 +110,6 @@
|
|||
"babel-plugin-transform-react-remove-prop-types": "0.4.24",
|
||||
"babel-plugin-transform-runtime": "6.23.0",
|
||||
"chalk": "3.0.0",
|
||||
"clean-webpack-plugin": "3.0.0",
|
||||
"commander": "4.1.1",
|
||||
"create-file-webpack": "1.0.2",
|
||||
"cross-env": "6.0.3",
|
||||
|
|
@ -135,12 +134,12 @@
|
|||
"node-sass": "4.14.1",
|
||||
"postcss-loader": "3.0.0",
|
||||
"prettier": "npm:wp-prettier@1.19.1",
|
||||
"progress-bar-webpack-plugin": "1.12.1",
|
||||
"progress-bar-webpack-plugin": "2.1.0",
|
||||
"promptly": "3.0.3",
|
||||
"puppeteer": "2.1.1",
|
||||
"react-test-renderer": "16.13.0",
|
||||
"request-promise": "4.2.5",
|
||||
"rimraf": "3.0.2",
|
||||
"rimraf": "^3.0.2",
|
||||
"sass-loader": "7.3.1",
|
||||
"source-map-explorer": "2.4.2",
|
||||
"stylelint": "12.0.1",
|
||||
|
|
|
|||
|
|
@ -7,7 +7,8 @@ const path = require( 'path' );
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
const { getAlias, getMainConfig } = require( '../bin/webpack-helpers.js' );
|
||||
const { getAlias } = require( '../bin/webpack-helpers.js' );
|
||||
const { getMainConfig } = require( '../bin/webpack-configs.js' );
|
||||
const tsConfig = require( '../tsconfig.json' );
|
||||
|
||||
const aliases = Object.keys( tsConfig.compilerOptions.paths ).reduce(
|
||||
|
|
|
|||
|
|
@ -1,24 +1,17 @@
|
|||
/**
|
||||
* External dependencies
|
||||
* Internal dependencies
|
||||
*/
|
||||
const path = require( 'path' );
|
||||
const { kebabCase } = require( 'lodash' );
|
||||
const { CleanWebpackPlugin } = require( 'clean-webpack-plugin' );
|
||||
const CreateFileWebpack = require( 'create-file-webpack' );
|
||||
const ProgressBarPlugin = require( 'progress-bar-webpack-plugin' );
|
||||
const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );
|
||||
const chalk = require( 'chalk' );
|
||||
const NODE_ENV = process.env.NODE_ENV || 'development';
|
||||
const FORCE_MAP = process.env.FORCE_MAP || false;
|
||||
const FallbackModuleDirectoryPlugin = require( './bin/fallback-module-directory-webpack-plugin' );
|
||||
const { NODE_ENV, FORCE_MAP, getAlias } = require( './bin/webpack-helpers.js' );
|
||||
const {
|
||||
getAlias,
|
||||
getCoreConfig,
|
||||
getMainConfig,
|
||||
getFrontConfig,
|
||||
getPaymentMethodsExtensionConfig,
|
||||
} = require( './bin/webpack-helpers.js' );
|
||||
getPaymentsConfig,
|
||||
} = require( './bin/webpack-configs.js' );
|
||||
|
||||
const baseConfig = {
|
||||
// Only options shared between all configs should be defined here.
|
||||
const sharedConfig = {
|
||||
mode: NODE_ENV,
|
||||
performance: {
|
||||
hints: false,
|
||||
|
|
@ -38,91 +31,45 @@ const baseConfig = {
|
|||
devtool: NODE_ENV === 'development' || FORCE_MAP ? 'source-map' : false,
|
||||
};
|
||||
|
||||
// Core config for shared libraries.
|
||||
const CoreConfig = {
|
||||
...baseConfig,
|
||||
entry: {
|
||||
wcBlocksRegistry: './assets/js/blocks-registry/index.js',
|
||||
wcSettings: './assets/js/settings/shared/index.js',
|
||||
wcBlocksData: './assets/js/data/index.js',
|
||||
wcBlocksMiddleware: './assets/js/middleware/index.js',
|
||||
wcSharedContext: './assets/js/shared/context/index.js',
|
||||
},
|
||||
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: /\.jsx?$/,
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: 'babel-loader?cacheDirectory',
|
||||
options: {
|
||||
presets: [ '@wordpress/babel-preset-default' ],
|
||||
plugins: [
|
||||
require.resolve(
|
||||
'@babel/plugin-proposal-class-properties'
|
||||
),
|
||||
].filter( Boolean ),
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
new CleanWebpackPlugin(),
|
||||
new ProgressBarPlugin( {
|
||||
format:
|
||||
chalk.blue( 'Build core script' ) +
|
||||
' [:bar] ' +
|
||||
chalk.green( ':percent' ) +
|
||||
' :msg (:elapsed seconds)',
|
||||
} ),
|
||||
new DependencyExtractionWebpackPlugin( { injectPolyfill: true } ),
|
||||
new CreateFileWebpack( {
|
||||
path: './',
|
||||
// file name
|
||||
fileName: 'blocks.ini',
|
||||
// content of the file
|
||||
content: `woocommerce_blocks_phase = ${ process.env
|
||||
.WOOCOMMERCE_BLOCKS_PHASE || 3 }`,
|
||||
} ),
|
||||
],
|
||||
...sharedConfig,
|
||||
...getCoreConfig( { alias: getAlias() } ),
|
||||
};
|
||||
|
||||
const GutenbergBlocksConfig = {
|
||||
...baseConfig,
|
||||
// Main Blocks config for registering Blocks and for the Editor.
|
||||
const MainConfig = {
|
||||
...sharedConfig,
|
||||
...getMainConfig( {
|
||||
alias: getAlias(),
|
||||
// This file is already imported by the All Products dependencies,
|
||||
// so we can safely exclude it from the default build. It's still
|
||||
// needed in the legacy build because it doesn't include the
|
||||
// All Products block.
|
||||
// This file is already imported by the All Products dependencies, so we can safely exclude
|
||||
// it from the default build. It's still needed in the legacy build because it doesn't
|
||||
// include the All Products block.
|
||||
exclude: [ 'product-list-style' ],
|
||||
} ),
|
||||
};
|
||||
|
||||
const BlocksFrontendConfig = {
|
||||
...baseConfig,
|
||||
// Frontend config for scripts used in the store itself.
|
||||
const FrontendConfig = {
|
||||
...sharedConfig,
|
||||
...getFrontConfig( { alias: getAlias() } ),
|
||||
};
|
||||
|
||||
/**
|
||||
* Currently Legacy Configs are for builds targeting < WP5.3
|
||||
* This is a temporary config for building the payment methods integration script until it can be
|
||||
* moved into the payment extension(s).
|
||||
*/
|
||||
const PaymentsConfig = {
|
||||
...sharedConfig,
|
||||
...getPaymentsConfig( { alias: getAlias() } ),
|
||||
};
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const LegacyBlocksConfig = {
|
||||
...baseConfig,
|
||||
/**
|
||||
* Legacy Configs are for builds targeting < WP5.3 and handle backwards compatibility and disabling
|
||||
* unsupported features.
|
||||
*/
|
||||
const LegacyMainConfig = {
|
||||
...sharedConfig,
|
||||
...getMainConfig( {
|
||||
fileSuffix: 'legacy',
|
||||
resolvePlugins: [
|
||||
|
|
@ -144,9 +91,8 @@ const LegacyBlocksConfig = {
|
|||
} ),
|
||||
};
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const LegacyFrontendBlocksConfig = {
|
||||
...baseConfig,
|
||||
const LegacyFrontendConfig = {
|
||||
...sharedConfig,
|
||||
...getFrontConfig( {
|
||||
fileSuffix: 'legacy',
|
||||
resolvePlugins: [
|
||||
|
|
@ -168,20 +114,11 @@ const LegacyFrontendBlocksConfig = {
|
|||
} ),
|
||||
};
|
||||
|
||||
/**
|
||||
* This is a temporary config for building the payment methods integration
|
||||
* script until it can be moved into the payment extension(s).
|
||||
*/
|
||||
const PaymentMethodsConfig = {
|
||||
...baseConfig,
|
||||
...getPaymentMethodsExtensionConfig( { alias: getAlias() } ),
|
||||
};
|
||||
|
||||
module.exports = [
|
||||
CoreConfig,
|
||||
GutenbergBlocksConfig,
|
||||
BlocksFrontendConfig,
|
||||
LegacyBlocksConfig,
|
||||
LegacyFrontendBlocksConfig,
|
||||
PaymentMethodsConfig,
|
||||
MainConfig,
|
||||
FrontendConfig,
|
||||
PaymentsConfig,
|
||||
LegacyMainConfig,
|
||||
LegacyFrontendConfig,
|
||||
];
|
||||
|
|
|
|||
Loading…
Reference in New Issue