vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2025-10-16 12:05:38 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Build: Update webpack to v5.x

Browse Source 
Update webpack version to latest version https://www.npmjs.com/package/webpack. This aligns closer with how the Gutenberg plugin handles WordPress packages. Related update in Gutenberg from August 2021: https://github.com/WordPress/gutenberg/pull/33818.

Props walbo, desrosj, mukesh27.
Fixes #51750.




git-svn-id: https://develop.svn.wordpress.org/trunk@53135 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Greg Ziółkowski 2022-04-11 12:02:14 +00:00
parent d5c8fb3f31
commit 4f64273933
11 changed files with 3837 additions and 5458 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8917
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

21
package.json
View File

@ -24,16 +24,14 @@
"last 2 Opera versions"
],
"devDependencies": {
"@wordpress/babel-preset-default": "6.4.1",
"@wordpress/custom-templated-path-webpack-plugin": "2.1.0",
"@wordpress/dependency-extraction-webpack-plugin": "3.2.1",
"@wordpress/babel-preset-default": "6.8.0",
"@wordpress/dependency-extraction-webpack-plugin": "3.4.1",
"@wordpress/e2e-test-utils": "5.4.10",
"@wordpress/library-export-default-webpack-plugin": "2.2.0",
"@wordpress/scripts": "19.2.4",
"@wordpress/scripts": "22.4.0",
"autoprefixer": "^9.8.8",
"chalk": "4.1.2",
"check-node-version": "4.2.1",
"copy-webpack-plugin": "^5.1.2",
"copy-webpack-plugin": "10.2.4",
"cssnano": "4.1.11",
"dotenv": "16.0.0",
"dotenv-expand": "8.0.3",
@ -57,7 +55,7 @@
"grunt-replace-lts": "~1.1.0",
"grunt-rtlcss": "~2.0.2",
"grunt-sass": "~3.1.0",
"grunt-webpack": "^4.0.3",
"grunt-webpack": "5.0.0",
"ink-docstrap": "1.3.2",
"install-changed": "1.1.0",
"jest-image-snapshot": "3.0.1",
@ -67,14 +65,13 @@
"sass": "^1.50.0",
"sinon": "~13.0.1",
"sinon-test": "~3.1.3",
"source-map-loader": "^1.1.3",
"source-map-loader": "3.0.1",
"terser-webpack-plugin": "5.3.1",
"uglify-js": "^3.15.3",
"uglifyjs-webpack-plugin": "2.2.0",
"uuid": "8.3.2",
"wait-on": "6.0.1",
"webpack": "4.43.0",
"webpack-dev-server": "3.11.2",
"webpack-livereload-plugin": "2.3.0"
"webpack": "5.72.0",
"webpack-livereload-plugin": "3.0.2"
},
"dependencies": {
"@wordpress/a11y": "3.2.4",

2
src/wp-includes/assets/script-loader-packages.php
View File

File diff suppressed because one or more lines are too long

2
src/wp-includes/blocks/file/view.asset.php
View File

@ -1 +1 @@
<?php return array('dependencies' => array(), 'version' => '499eaf2efb98327a07f222e92d742380');
<?php return array('dependencies' => array(), 'version' => '9a1dbe2fc8e62a7e82dd0d30439951b3');

2
src/wp-includes/blocks/file/view.min.asset.php
View File

@ -1 +1 @@
<?php return array('dependencies' => array(), 'version' => 'e8d668b8e69d9bf1c99dc250d92f2b72');
<?php return array('dependencies' => array(), 'version' => 'c7ee2db603af4ed37bd6b1d2bb4a51bf');

2
src/wp-includes/blocks/navigation/view.asset.php
View File

@ -1 +1 @@
<?php return array('dependencies' => array(), 'version' => '49bd3949750c5172758e1b3058f0c72a');
<?php return array('dependencies' => array(), 'version' => '3bc2957a58e1f08fa9309e91ffeef792');

2
src/wp-includes/blocks/navigation/view.min.asset.php
View File

@ -1 +1 @@
<?php return array('dependencies' => array(), 'version' => '3776ea67846b3bb10fe8f7cdd486b0ba');
<?php return array('dependencies' => array(), 'version' => '009e29110e016c14bac4ba0ecc809fcd');

83
tools/webpack/blocks.js
View File

@ -3,18 +3,17 @@
*/
const { DefinePlugin } = require( 'webpack' );
const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
const postcss = require( 'postcss' );
const UglifyJS = require( 'uglify-js' );
const { join, basename } = require( 'path' );
const { get } = require( 'lodash' );
const { join } = require( 'path' );
/**
* WordPress dependencies
*/
const DependencyExtractionPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );
const baseDir = join( __dirname, '../../' );
/**
* Internal dependencies
*/
const { stylesTransform, baseConfig, baseDir } = require( './shared' );
module.exports = function( env = { environment: 'production', watch: false, buildTarget: false } ) {
const mode = env.environment;
@ -125,32 +124,13 @@ module.exports = function( env = { environment: 'production', watch: false, buil
const blockStylesheetCopies = blockFolders.map( ( blockName ) => ( {
from: join( baseDir, `node_modules/@wordpress/block-library/build-style/${ blockName }/*.css` ),
to: join( baseDir, `${ buildTarget }/blocks/${ blockName }/` ),
flatten: true,
transform: ( content ) => {
if ( mode === 'production' ) {
return postcss( [
require( 'cssnano' )( {
preset: 'default',
} ),
] )
.process( content, { from: 'src/app.css', to: 'dest/app.css' } )
.then( ( result ) => result.css );
}
return content;
},
transformPath: ( targetPath, sourcePath ) => {
if ( mode === 'production' ) {
return targetPath.replace( /\.css$/, '.min.css' );
}
return targetPath;
}
to: join( baseDir, `${ buildTarget }/blocks/${ blockName }/[name]${ suffix }.css` ),
transform: stylesTransform( mode ),
noErrorOnMissing: true,
} ) );
const config = {
mode,
...baseConfig( env ),
entry: {
'file/view': join( baseDir, `node_modules/@wordpress/block-library/build-module/file/view` ),
'navigation/view': join( baseDir, `node_modules/@wordpress/block-library/build-module/navigation/view` ),
@ -160,27 +140,6 @@ module.exports = function( env = { environment: 'production', watch: false, buil
filename: `[name]${ suffix }.js`,
path: join( baseDir, `${ buildTarget }/blocks` ),
},
resolve: {
modules: [
baseDir,
'node_modules',
],
alias: {
'lodash-es': 'lodash',
},
},
module: {
rules: [
{
test: /\.js$/,
use: [ 'source-map-loader' ],
enforce: 'pre',
},
],
},
optimization: {
moduleIds: mode === 'production' ? 'hashed' : 'named',
},
plugins: [
new DefinePlugin( {
// Inject the `GUTENBERG_PHASE` global, used for feature flagging.
@ -192,33 +151,15 @@ module.exports = function( env = { environment: 'production', watch: false, buil
new DependencyExtractionPlugin( {
injectPolyfill: false,
} ),
new CopyWebpackPlugin(
[
new CopyWebpackPlugin( {
patterns: [
...blockPHPCopies,
...blockMetadataCopies,
...blockStylesheetCopies,
],
),
} ),
],
stats: {
children: false,
},
watch: env.watch,
};
if ( config.mode !== 'production' ) {
config.devtool = process.env.SOURCEMAP || 'source-map';
}
if ( mode === 'development' && env.buildTarget === 'build/' ) {
delete config.devtool;
config.mode = 'production';
config.optimization = {
minimize: false,
moduleIds: 'hashed',
};
}
return config;
};

25
tools/webpack/media.js
View File

@ -1,12 +1,15 @@
const UglifyJsPlugin = require( 'uglifyjs-webpack-plugin' );
/**
* External dependencies
*/
const TerserPlugin = require( 'terser-webpack-plugin' );
var path = require( 'path' ),
admin_files = {};
const baseDir = path.join( __dirname, '../../' );
/**
* Internal dependencies
*/
const { baseDir } = require( './shared' );
module.exports = function( env = { environment: 'production', watch: false, buildTarget: false } ) {
const include_files = {
const entry = {
[ env.buildTarget + 'wp-includes/js/media-audiovideo.js' ]: ['./src/js/_enqueues/wp/media/audiovideo.js'],
[ env.buildTarget + 'wp-includes/js/media-audiovideo.min.js' ]: ['./src/js/_enqueues/wp/media/audiovideo.js'],
[ env.buildTarget + 'wp-includes/js/media-grid.js' ]: ['./src/js/_enqueues/wp/media/grid.js'],
@ -18,20 +21,22 @@ module.exports = function( env = { environment: 'production', watch: false, buil
};
const mediaConfig = {
target: 'browserslist',
mode: "production",
cache: true,
entry: Object.assign( admin_files, include_files ),
entry,
output: {
path: baseDir,
filename: '[name]',
},
optimization: {
minimize: true,
moduleIds: 'hashed',
moduleIds: 'deterministic',
minimizer: [
new UglifyJsPlugin( {
new TerserPlugin( {
include: /\.min\.js$/,
} )
extractComments: false,
} ),
]
},
watch: env.watch,

163
tools/webpack/packages.js
View File

@ -4,42 +4,33 @@
const { DefinePlugin } = require( 'webpack' );
const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
const LiveReloadPlugin = require( 'webpack-livereload-plugin' );
const postcss = require( 'postcss' );
const UglifyJS = require( 'uglify-js' );
const { join, basename } = require( 'path' );
const { get } = require( 'lodash' );
const { join } = require( 'path' );
/**
* WordPress dependencies
*/
const CustomTemplatedPathPlugin = require( '@wordpress/custom-templated-path-webpack-plugin' );
const {
camelCaseDash,
} = require( '@wordpress/dependency-extraction-webpack-plugin/lib/util' );
const DependencyExtractionPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );
const LibraryExportDefaultPlugin = require( '@wordpress/library-export-default-webpack-plugin' );
/**
* Internal dependencies
*/
const { stylesTransform, baseConfig, baseDir } = require( './shared' );
const { dependencies } = require( '../../package' );
const baseDir = join( __dirname, '../../' );
/**
* Given a string, returns a new string with dash separators converedd to
* camel-case equivalent. This is not as aggressive as `_.camelCase` in
* converting to uppercase, where Lodash will convert letters following
* numbers.
*
* @param {string} string Input dash-delimited string.
*
* @return {string} Camel-cased string.
*/
function camelCaseDash( string ) {
return string.replace(
/-([a-z])/g,
( match, letter ) => letter.toUpperCase()
);
}
const exportDefaultPackages = [
'api-fetch',
'deprecated',
'dom-ready',
'redux-routine',
'token-list',
'server-side-render',
'shortcode',
'warning',
];
/**
* Maps vendors to copy commands for the CopyWebpackPlugin.
@ -125,28 +116,9 @@ module.exports = function( env = { environment: 'production', watch: false, buil
let cssCopies = packages.map( ( packageName ) => ( {
from: join( baseDir, `node_modules/@wordpress/${ packageName }/build-style/*.css` ),
to: join( baseDir, `${ buildTarget }/css/dist/${ packageName }/` ),
flatten: true,
transform: ( content ) => {
if ( mode === 'production' ) {
return postcss( [
require( 'cssnano' )( {
preset: 'default',
} ),
] )
.process( content, { from: 'src/app.css', to: 'dest/app.css' } )
.then( ( result ) => result.css );
}
return content;
},
transformPath: ( targetPath, sourcePath ) => {
if ( mode === 'production' ) {
return targetPath.replace( /\.css$/, '.min.css' );
}
return targetPath;
}
to: join( baseDir, `${ buildTarget }/css/dist/${ packageName }/[name]${ suffix }.css` ),
transform: stylesTransform( mode ),
noErrorOnMissing: true,
} ) );
const phpCopies = Object.keys( phpFiles ).map( ( filename ) => ( {
@ -155,42 +127,25 @@ module.exports = function( env = { environment: 'production', watch: false, buil
} ) );
const config = {
mode,
...baseConfig( env ),
entry: packages.reduce( ( memo, packageName ) => {
const name = camelCaseDash( packageName );
memo[ name ] = join( baseDir, `node_modules/@wordpress/${ packageName }` );
memo[ packageName ] = {
import: join( baseDir, `node_modules/@wordpress/${ packageName }` ),
library: {
name: [ 'wp', camelCaseDash( packageName ) ],
type: 'window',
export: exportDefaultPackages.includes( packageName )
? 'default'
: undefined,
},
};
return memo;
}, {} ),
output: {
devtoolNamespace: 'wp',
filename: `[basename]${ suffix }.js`,
filename: `[name]${ suffix }.js`,
path: join( baseDir, `${ buildTarget }/js/dist` ),
library: {
root: [ 'wp', '[name]' ]
},
libraryTarget: 'this',
},
resolve: {
modules: [
baseDir,
'node_modules',
],
alias: {
'lodash-es': 'lodash',
},
},
module: {
rules: [
{
test: /\.js$/,
use: [ 'source-map-loader' ],
enforce: 'pre',
},
],
},
optimization: {
moduleIds: mode === 'production' ? 'hashed' : 'named',
},
plugins: [
new DefinePlugin( {
@ -202,71 +157,21 @@ module.exports = function( env = { environment: 'production', watch: false, buil
process.env.FORCE_REDUCED_MOTION
),
} ),
new LibraryExportDefaultPlugin( [
'api-fetch',
'deprecated',
'dom-ready',
'redux-routine',
'token-list',
'server-side-render',
'shortcode',
'warning',
].map( camelCaseDash ) ),
new CustomTemplatedPathPlugin( {
basename( path, data ) {
let rawRequest;
const entryModule = get( data, [ 'chunk', 'entryModule' ], {} );
switch ( entryModule.type ) {
case 'javascript/auto':
rawRequest = entryModule.rawRequest;
break;
case 'javascript/esm':
rawRequest = entryModule.rootModule.rawRequest;
break;
}
if ( rawRequest ) {
return basename( rawRequest );
}
return path;
},
} ),
new DependencyExtractionPlugin( {
injectPolyfill: true,
combineAssets: true,
combinedOutputFile: '../../assets/script-loader-packages.php',
} ),
new CopyWebpackPlugin(
[
new CopyWebpackPlugin( {
patterns: [
...vendorCopies,
...cssCopies,
...phpCopies,
],
),
} ),
],
stats: {
children: false,
},
watch: env.watch,
};
if ( config.mode !== 'production' ) {
config.devtool = process.env.SOURCEMAP || 'source-map';
}
if ( mode === 'development' && env.buildTarget === 'build/' ) {
delete config.devtool;
config.mode = 'production';
config.optimization = {
minimize: false,
moduleIds: 'hashed',
};
}
if ( config.mode === 'development' ) {
config.plugins.push( new LiveReloadPlugin( { port: process.env.WORDPRESS_LIVE_RELOAD_PORT || 35729 } ) );
}

76
tools/webpack/shared.js Normal file
View File

@ -0,0 +1,76 @@
/**
* External dependencies
*/
const TerserPlugin = require( 'terser-webpack-plugin' );
const postcss = require( 'postcss' );
const { join } = require( 'path' );
const baseDir = join( __dirname, '../../' );
const baseConfig = ( env ) => {
const mode = env.environment;
const config = {
target: 'browserslist',
mode,
optimization: {
moduleIds: mode === 'production' ? 'deterministic' : 'named',
minimizer: [
new TerserPlugin( {
extractComments: false,
} ),
]
},
module: {
rules: [
{
test: /\.js$/,
use: [ 'source-map-loader' ],
enforce: 'pre',
},
],
},
resolve: {
modules: [
baseDir,
'node_modules',
],
alias: {
'lodash-es': 'lodash',
},
},
stats: 'errors-only',
watch: env.watch,
};
if ( mode === 'development' && env.buildTarget === 'build/' ) {
config.mode = 'production';
config.optimization = {
minimize: false,
moduleIds: 'deterministic',
};
} else if ( mode !== 'production' ) {
config.devtool = process.env.SOURCEMAP || 'source-map';
}
return config;
};
const stylesTransform = ( mode ) => ( content ) => {
if ( mode === 'production' ) {
return postcss( [
require( 'cssnano' )( {
preset: 'default',
} ),
] )
.process( content, { from: 'src/app.css', to: 'dest/app.css' } )
.then( ( result ) => result.css );
}
return content;
};
module.exports = {
baseDir,
baseConfig,
stylesTransform,
};