diff --git a/tools/webpack/blocks.js b/tools/webpack/blocks.js index d96f334dcb5a88..98e1a7074fda9d 100644 --- a/tools/webpack/blocks.js +++ b/tools/webpack/blocks.js @@ -9,15 +9,7 @@ const fastGlob = require( 'fast-glob' ); /** * Internal dependencies */ -const { - devtool, - mode, - moduleConfig, - optimization, - plugins, - stylesTransform, - watchOptions, -} = require( './shared' ); +const { baseConfig, plugins, stylesTransform } = require( './shared' ); /* * Matches a block's name in paths in the form @@ -52,16 +44,14 @@ const createEntrypoints = () => { }; module.exports = { + ...baseConfig, name: 'blocks', - optimization, - mode, entry: createEntrypoints(), output: { devtoolNamespace: 'wp', filename: './build/block-library/[name]/view.min.js', path: join( __dirname, '..', '..' ), }, - module: moduleConfig, plugins: [ ...plugins, new CopyWebpackPlugin( { @@ -167,6 +157,4 @@ module.exports = { ), } ), ].filter( Boolean ), - watchOptions, - devtool, }; diff --git a/tools/webpack/packages.js b/tools/webpack/packages.js index 3647c8c429a870..c20a23c3388b82 100644 --- a/tools/webpack/packages.js +++ b/tools/webpack/packages.js @@ -17,15 +17,7 @@ const { * Internal dependencies */ const { dependencies } = require( '../../package' ); -const { - devtool, - mode, - moduleConfig, - optimization, - plugins, - stylesTransform, - watchOptions, -} = require( './shared' ); +const { baseConfig, plugins, stylesTransform } = require( './shared' ); const WORDPRESS_NAMESPACE = '@wordpress/'; const BUNDLED_PACKAGES = [ '@wordpress/icons', '@wordpress/interface' ]; @@ -40,9 +32,8 @@ const gutenbergPackages = Object.keys( dependencies ) .map( ( packageName ) => packageName.replace( WORDPRESS_NAMESPACE, '' ) ); module.exports = { + ...baseConfig, name: 'packages', - optimization, - mode, entry: gutenbergPackages.reduce( ( memo, packageName ) => { return { ...memo, @@ -56,7 +47,6 @@ module.exports = { library: [ 'wp', '[camelName]' ], libraryTarget: 'window', }, - module: moduleConfig, plugins: [ ...plugins, new CustomTemplatedPathPlugin( { @@ -84,6 +74,4 @@ module.exports = { } ) ), } ), ].filter( Boolean ), - watchOptions, - devtool, }; diff --git a/tools/webpack/shared.js b/tools/webpack/shared.js index 861573e8414cf6..f2f1cdf2aaefc4 100644 --- a/tools/webpack/shared.js +++ b/tools/webpack/shared.js @@ -18,62 +18,46 @@ const { WP_DEVTOOL: devtool = mode === 'production' ? false : 'source-map', } = process.env; -const stylesTransform = ( content ) => { - if ( mode === 'production' ) { - return postcss( [ - require( 'cssnano' )( { - preset: [ - 'default', - { - discardComments: { - removeAll: true, - }, +const baseConfig = { + optimization: { + // Only concatenate modules in production, when not analyzing bundles. + concatenateModules: + mode === 'production' && ! process.env.WP_BUNDLE_ANALYZER, + minimizer: [ + new TerserPlugin( { + cache: true, + parallel: true, + sourceMap: mode !== 'production', + terserOptions: { + output: { + comments: /translators:/i, + }, + compress: { + passes: 2, + }, + mangle: { + reserved: [ '__', '_n', '_nx', '_x' ], }, - ], - } ), - ] ) - .process( content, { - from: 'src/app.css', - to: 'dest/app.css', - } ) - .then( ( result ) => result.css ); - } - return content; -}; - -const optimization = { - // Only concatenate modules in production, when not analyzing bundles. - concatenateModules: - mode === 'production' && ! process.env.WP_BUNDLE_ANALYZER, - minimizer: [ - new TerserPlugin( { - cache: true, - parallel: true, - sourceMap: mode !== 'production', - terserOptions: { - output: { - comments: /translators:/i, - }, - compress: { - passes: 2, - }, - mangle: { - reserved: [ '__', '_n', '_nx', '_x' ], }, + extractComments: false, + } ), + ], + }, + mode, + module: { + rules: compact( [ + mode !== 'production' && { + test: /\.js$/, + use: require.resolve( 'source-map-loader' ), + enforce: 'pre', }, - extractComments: false, - } ), - ], -}; - -const moduleConfig = { - rules: compact( [ - mode !== 'production' && { - test: /\.js$/, - use: require.resolve( 'source-map-loader' ), - enforce: 'pre', - }, - ] ), + ] ), + }, + watchOptions: { + ignored: [ '**/node_modules', '**/packages/*/src' ], + aggregateTimeout: 500, + }, + devtool, }; const plugins = [ @@ -93,17 +77,31 @@ const plugins = [ mode === 'production' && new ReadableJsAssetsWebpackPlugin(), ]; -const watchOptions = { - ignored: [ '**/node_modules', '**/packages/*/src' ], - aggregateTimeout: 500, +const stylesTransform = ( content ) => { + if ( mode === 'production' ) { + return postcss( [ + require( 'cssnano' )( { + preset: [ + 'default', + { + discardComments: { + removeAll: true, + }, + }, + ], + } ), + ] ) + .process( content, { + from: 'src/app.css', + to: 'dest/app.css', + } ) + .then( ( result ) => result.css ); + } + return content; }; module.exports = { - devtool, - mode, - moduleConfig, - optimization, + baseConfig, plugins, stylesTransform, - watchOptions, };