Skip to content

Block Editor: Try using DependencyExtractionWebpackPlugin #102

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 8 commits into from
Closed

Block Editor: Try using DependencyExtractionWebpackPlugin #102

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
176461f
Block Editor: Try using DependencyExtractionWebpackPlugin
gziolo Sep 24, 2019
d7c3509
Remove externals and install `@wordprss/block-directory`
gziolo Sep 24, 2019
d189ffd
Switch to JSON format for asset files
gziolo Dec 4, 2019
2f12957
Add back the block directory package which seems to be required for W…
gziolo Dec 4, 2019
e48dbf6
Update the workflow to use PHP files moved to their own folder
gziolo Dec 4, 2019
cdcf3b4
Fix issues reported by PHP linter
gziolo Dec 4, 2019
b8ed7a9
Fix the failing PHPUnit test
gziolo Dec 6, 2019
ba91cc1
Polish Gruntfile and the handling for assets generated by webpack
gziolo Dec 13, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ wp-tests-config.php
/src/wp-admin/css/*-rtl.css
/src/wp-admin/css/colors/*/*.css
/src/wp-admin/js
/src/wp-includes/assets
/src/wp-includes/js
/src/wp-includes/css/dist
/src/wp-includes/css/*.min.css
Expand Down
21 changes: 19 additions & 2 deletions Gruntfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,8 +108,12 @@ module.exports = function(grunt) {
],
js: [
WORKING_DIR + 'wp-admin/js/',
WORKING_DIR + 'wp-includes/assets/',
WORKING_DIR + 'wp-includes/js/'
],
'webpack-assets': [
WORKING_DIR + 'wp-includes/js/**/*.asset.php'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Based on the core trac image the php assets are now stored in the /src/wp-includes/assets/dist folder

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's more complex than that.

This is where webpack generates those PHP assets, we move them to /src/wp-includes/assets/dist or /build/wp-includes/assets/dist depending where webpack operates. It's even more hard to follow when you take into account that npm run build:dev operates in src folder, but npm run build uses build folder ...

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This name should probably be updated to webpack-generated-assets :)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ntwb I included some tweaks to make it easier to follow. I hope it helps:

ba91cc1

],
dynamic: {
dot: true,
expand: true,
Expand Down Expand Up @@ -137,6 +141,7 @@ module.exports = function(grunt) {
expand: true,
cwd: SOURCE_DIR,
src: buildFiles.concat( [
'!assets/**', // Assets is extracted into separate copy tasks.
'!js/**', // JavaScript is extracted into separate copy tasks.
'!.{svn,git}', // Exclude version control folders.
'!wp-includes/version.php', // Exclude version.php
Expand Down Expand Up @@ -345,6 +350,12 @@ module.exports = function(grunt) {
}
]
},
'webpack-assets': {
expand: true,
cwd: WORKING_DIR + 'wp-includes/js/',
src: 'dist/*.asset.php',
dest: WORKING_DIR + 'wp-includes/assets/'
},
version: {
options: {
processContent: function( src ) {
Expand Down Expand Up @@ -1350,10 +1361,16 @@ module.exports = function(grunt) {
'uglify:jqueryform'
] );

grunt.registerTask( 'build:js', [
'clean:js',
grunt.registerTask( 'build:webpack', [
'webpack:prod',
'webpack:dev',
'copy:webpack-assets',
'clean:webpack-assets',
] );

grunt.registerTask( 'build:js', [
'clean:js',
'build:webpack',
'copy:js',
'file_append',
'uglify:all',
Expand Down
Loading