Skip to content

Commit 4f64273

Browse files
gziologziolo
committed
Build: Update webpack to v5.x
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: WordPress/gutenberg#33818. Props walbo, desrosj, mukesh27. Fixes #51750. git-svn-id: https://develop.svn.wordpress.org/trunk@53135 602fd350-edb4-49c9-b593-d223f7449a82
1 parent d5c8fb3 commit 4f64273

11 files changed

Lines changed: 3841 additions & 5462 deletions

File tree

‎package-lock.json‎

Lines changed: 3690 additions & 5235 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -24,16 +24,14 @@
2424
"last 2 Opera versions"
2525
],
2626
"devDependencies": {
27-
"@wordpress/babel-preset-default": "6.4.1",
28-
"@wordpress/custom-templated-path-webpack-plugin": "2.1.0",
29-
"@wordpress/dependency-extraction-webpack-plugin": "3.2.1",
27+
"@wordpress/babel-preset-default": "6.8.0",
28+
"@wordpress/dependency-extraction-webpack-plugin": "3.4.1",
3029
"@wordpress/e2e-test-utils": "5.4.10",
31-
"@wordpress/library-export-default-webpack-plugin": "2.2.0",
32-
"@wordpress/scripts": "19.2.4",
30+
"@wordpress/scripts": "22.4.0",
3331
"autoprefixer": "^9.8.8",
3432
"chalk": "4.1.2",
3533
"check-node-version": "4.2.1",
36-
"copy-webpack-plugin": "^5.1.2",
34+
"copy-webpack-plugin": "10.2.4",
3735
"cssnano": "4.1.11",
3836
"dotenv": "16.0.0",
3937
"dotenv-expand": "8.0.3",
@@ -57,7 +55,7 @@
5755
"grunt-replace-lts": "~1.1.0",
5856
"grunt-rtlcss": "~2.0.2",
5957
"grunt-sass": "~3.1.0",
60-
"grunt-webpack": "^4.0.3",
58+
"grunt-webpack": "5.0.0",
6159
"ink-docstrap": "1.3.2",
6260
"install-changed": "1.1.0",
6361
"jest-image-snapshot": "3.0.1",
@@ -67,14 +65,13 @@
6765
"sass": "^1.50.0",
6866
"sinon": "~13.0.1",
6967
"sinon-test": "~3.1.3",
70-
"source-map-loader": "^1.1.3",
68+
"source-map-loader": "3.0.1",
69+
"terser-webpack-plugin": "5.3.1",
7170
"uglify-js": "^3.15.3",
72-
"uglifyjs-webpack-plugin": "2.2.0",
7371
"uuid": "8.3.2",
7472
"wait-on": "6.0.1",
75-
"webpack": "4.43.0",
76-
"webpack-dev-server": "3.11.2",
77-
"webpack-livereload-plugin": "2.3.0"
73+
"webpack": "5.72.0",
74+
"webpack-livereload-plugin": "3.0.2"
7875
},
7976
"dependencies": {
8077
"@wordpress/a11y": "3.2.4",

‎src/wp-includes/assets/script-loader-packages.php‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎src/wp-includes/blocks/file/view.asset.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<?php return array('dependencies' => array(), 'version' => '499eaf2efb98327a07f222e92d742380');
1+
<?php return array('dependencies' => array(), 'version' => '9a1dbe2fc8e62a7e82dd0d30439951b3');

‎src/wp-includes/blocks/file/view.min.asset.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<?php return array('dependencies' => array(), 'version' => 'e8d668b8e69d9bf1c99dc250d92f2b72');
1+
<?php return array('dependencies' => array(), 'version' => 'c7ee2db603af4ed37bd6b1d2bb4a51bf');

‎src/wp-includes/blocks/navigation/view.asset.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<?php return array('dependencies' => array(), 'version' => '49bd3949750c5172758e1b3058f0c72a');
1+
<?php return array('dependencies' => array(), 'version' => '3bc2957a58e1f08fa9309e91ffeef792');

‎src/wp-includes/blocks/navigation/view.min.asset.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<?php return array('dependencies' => array(), 'version' => '3776ea67846b3bb10fe8f7cdd486b0ba');
1+
<?php return array('dependencies' => array(), 'version' => '009e29110e016c14bac4ba0ecc809fcd');

‎tools/webpack/blocks.js‎

Lines changed: 12 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,17 @@
33
*/
44
const { DefinePlugin } = require( 'webpack' );
55
const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
6-
const postcss = require( 'postcss' );
7-
const UglifyJS = require( 'uglify-js' );
8-
9-
const { join, basename } = require( 'path' );
10-
const { get } = require( 'lodash' );
6+
const { join } = require( 'path' );
117

128
/**
139
* WordPress dependencies
1410
*/
1511
const DependencyExtractionPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );
1612

17-
const baseDir = join( __dirname, '../../' );
13+
/**
14+
* Internal dependencies
15+
*/
16+
const { stylesTransform, baseConfig, baseDir } = require( './shared' );
1817

1918
module.exports = function( env = { environment: 'production', watch: false, buildTarget: false } ) {
2019
const mode = env.environment;
@@ -125,32 +124,13 @@ module.exports = function( env = { environment: 'production', watch: false, buil
125124

126125
const blockStylesheetCopies = blockFolders.map( ( blockName ) => ( {
127126
from: join( baseDir, `node_modules/@wordpress/block-library/build-style/${ blockName }/*.css` ),
128-
to: join( baseDir, `${ buildTarget }/blocks/${ blockName }/` ),
129-
flatten: true,
130-
transform: ( content ) => {
131-
if ( mode === 'production' ) {
132-
return postcss( [
133-
require( 'cssnano' )( {
134-
preset: 'default',
135-
} ),
136-
] )
137-
.process( content, { from: 'src/app.css', to: 'dest/app.css' } )
138-
.then( ( result ) => result.css );
139-
}
140-
141-
return content;
142-
},
143-
transformPath: ( targetPath, sourcePath ) => {
144-
if ( mode === 'production' ) {
145-
return targetPath.replace( /\.css$/, '.min.css' );
146-
}
147-
148-
return targetPath;
149-
}
127+
to: join( baseDir, `${ buildTarget }/blocks/${ blockName }/[name]${ suffix }.css` ),
128+
transform: stylesTransform( mode ),
129+
noErrorOnMissing: true,
150130
} ) );
151131

152132
const config = {
153-
mode,
133+
...baseConfig( env ),
154134
entry: {
155135
'file/view': join( baseDir, `node_modules/@wordpress/block-library/build-module/file/view` ),
156136
'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
160140
filename: `[name]${ suffix }.js`,
161141
path: join( baseDir, `${ buildTarget }/blocks` ),
162142
},
163-
resolve: {
164-
modules: [
165-
baseDir,
166-
'node_modules',
167-
],
168-
alias: {
169-
'lodash-es': 'lodash',
170-
},
171-
},
172-
module: {
173-
rules: [
174-
{
175-
test: /\.js$/,
176-
use: [ 'source-map-loader' ],
177-
enforce: 'pre',
178-
},
179-
],
180-
},
181-
optimization: {
182-
moduleIds: mode === 'production' ? 'hashed' : 'named',
183-
},
184143
plugins: [
185144
new DefinePlugin( {
186145
// Inject the `GUTENBERG_PHASE` global, used for feature flagging.
@@ -192,33 +151,15 @@ module.exports = function( env = { environment: 'production', watch: false, buil
192151
new DependencyExtractionPlugin( {
193152
injectPolyfill: false,
194153
} ),
195-
new CopyWebpackPlugin(
196-
[
154+
new CopyWebpackPlugin( {
155+
patterns: [
197156
...blockPHPCopies,
198157
...blockMetadataCopies,
199158
...blockStylesheetCopies,
200159
],
201-
),
160+
} ),
202161
],
203-
stats: {
204-
children: false,
205-
},
206-
207-
watch: env.watch,
208162
};
209163

210-
if ( config.mode !== 'production' ) {
211-
config.devtool = process.env.SOURCEMAP || 'source-map';
212-
}
213-
214-
if ( mode === 'development' && env.buildTarget === 'build/' ) {
215-
delete config.devtool;
216-
config.mode = 'production';
217-
config.optimization = {
218-
minimize: false,
219-
moduleIds: 'hashed',
220-
};
221-
}
222-
223164
return config;
224165
};

‎tools/webpack/media.js‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
1-
const UglifyJsPlugin = require( 'uglifyjs-webpack-plugin' );
1+
/**
2+
* External dependencies
3+
*/
4+
const TerserPlugin = require( 'terser-webpack-plugin' );
25

3-
var path = require( 'path' ),
4-
admin_files = {};
5-
6-
const baseDir = path.join( __dirname, '../../' );
6+
/**
7+
* Internal dependencies
8+
*/
9+
const { baseDir } = require( './shared' );
710

811
module.exports = function( env = { environment: 'production', watch: false, buildTarget: false } ) {
9-
const include_files = {
12+
const entry = {
1013
[ env.buildTarget + 'wp-includes/js/media-audiovideo.js' ]: ['./src/js/_enqueues/wp/media/audiovideo.js'],
1114
[ env.buildTarget + 'wp-includes/js/media-audiovideo.min.js' ]: ['./src/js/_enqueues/wp/media/audiovideo.js'],
1215
[ 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
1821
};
1922

2023
const mediaConfig = {
24+
target: 'browserslist',
2125
mode: "production",
2226
cache: true,
23-
entry: Object.assign( admin_files, include_files ),
27+
entry,
2428
output: {
2529
path: baseDir,
2630
filename: '[name]',
2731
},
2832
optimization: {
2933
minimize: true,
30-
moduleIds: 'hashed',
34+
moduleIds: 'deterministic',
3135
minimizer: [
32-
new UglifyJsPlugin( {
36+
new TerserPlugin( {
3337
include: /\.min\.js$/,
34-
} )
38+
extractComments: false,
39+
} ),
3540
]
3641
},
3742
watch: env.watch,

0 commit comments

Comments
 (0)