Build Tools: Copy package JavaScript and CSS into wp-includes.

- `grunt webpack:dev` now copies packages JS into `/src/wp-includes/js/dist`, and CSS into `/src/wp-includes/css/dist`.
- `grunt webpack:prod` does the same, but into `/build` instead of `/src`.
- `grunt build` now runs the `webpack:prod` task.

Merges [43760] from the 5.0 branch to trunk.

Props atimmer, pento.
Fixes #45119.



git-svn-id: https://develop.svn.wordpress.org/trunk@44159 602fd350-edb4-49c9-b593-d223f7449a82

.gitignore

@@ -19,6 +19,8 @@ wp-tests-config.php
 /tests/phpunit/build
 /wp-cli.local.yml
 /jsdoc
+/src/wp-includes/js
+/src/wp-includes/css/dist
 
 # Files and folders that get created in wp-content
 /src/wp-content/blogs.dir

Gruntfile.js

@@ -1346,7 +1346,6 @@ module.exports = function(grunt) {
 
 	grunt.registerTask( 'build', [
 		'clean:all',
-		'webpack:dev',
 		'copy:all',
 		'file_append',
 		'cssmin:core',
@@ -1360,6 +1359,7 @@ module.exports = function(grunt) {
 		'includes:emoji',
 		'includes:embed',
 		'usebanner',
+		'webpack:prod',
 		'jsvalidate:build'
 	] );
 

src/wp-includes/script-loader.php

@@ -96,7 +96,7 @@ function wp_default_packages_vendor( &$scripts ) {
 			$dependencies = array();
 		}
 
-		$path = "/js/dist/vendor/$handle$dev_suffix.js";
+		$path = "/wp-includes/js/dist/vendor/$handle$dev_suffix.js";
 
 		$scripts->add( $handle, $path, $dependencies, false, 1 );
 	}
@@ -336,8 +336,8 @@ function wp_default_packages_scripts( &$scripts ) {
 	);
 
 	foreach ( $packages_dependencies as $package => $dependencies ) {
-		$handle = 'wp-' . $package;
-		$path   = "/js/dist/$package$suffix.js";
+		$handle  = 'wp-' . $package;
+		$path    = "/wp-includes/js/dist/$package$suffix.js";
 
 		$scripts->add( $handle, $path, $dependencies, false, 1 );
 	}
@@ -1800,12 +1800,12 @@ function wp_default_styles( &$styles ) {
 	}
 	$styles->add( 'wp-editor-font', $fonts_url );
 
-	$styles->add( 'wp-block-library-theme', '/styles/dist/block-library/theme.css' );
+	$styles->add( 'wp-block-library-theme', '/wp-includes/css/dist/block-library/theme.css' );
 	$styles->add_data( 'wp-block-library-theme', 'rtl', 'replace' );
 
 	$styles->add(
 		'wp-edit-blocks',
-		'/styles/dist/block-library/editor.css',
+		'/wp-includes/css/dist/block-library/editor.css',
 		array(
 			'wp-components',
 			'wp-editor',
@@ -1825,8 +1825,8 @@ function wp_default_styles( &$styles ) {
 	);
 
 	foreach ( $package_styles as $package => $dependencies ) {
-		$handle = 'wp-' . $package;
-		$path   = '/styles/dist/' . $package . '/style.css';
+		$handle  = 'wp-' . $package;
+		$path     = '/wp-includes/css/dist/' . $package . '/style.css';
 
 		$styles->add( $handle, $path, $dependencies );
 		$styles->add_data( $handle, 'rtl', 'replace' );

tools/webpack/packages.js

@@ -37,20 +37,22 @@ function camelCaseDash( string ) {
 /**
  * Maps vendors to copy commands for the CopyWebpackPlugin.
  *
- * @param {Object} vendors Vendors to include in the vendor folder.
+ * @param {Object} vendors     Vendors to include in the vendor folder.
+ * @param {string} buildTarget The folder in which to build the packages.
  *
  * @return {Object[]} Copy object suitable for the CopyWebpackPlugin.
  */
-function mapVendorCopies( vendors ) {
+function mapVendorCopies( vendors, buildTarget ) {
 	return Object.keys( vendors ).map( ( filename ) => ( {
 		from: join( baseDir, `node_modules/${ vendors[ filename ] }` ),
-		to: join( baseDir, `build/js/dist/vendor/${ filename }` ),
+		to: join( baseDir, `${ buildTarget }/js/dist/vendor/${ filename }` ),
 	} ) );
 }
 
 module.exports = function( env = { environment: 'production', watch: false } ) {
 	const mode = env.environment;
-	const suffix = mode === 'production' ? '.min': '';
+	const suffix = mode === 'production' ? '.min' : '';
+	const buildTarget = ( mode === 'production' ? 'build' : 'src' ) + '/wp-includes';
 
 	const packages = [
 		'api-fetch',
@@ -143,9 +145,9 @@ module.exports = function( env = { environment: 'production', watch: false } ) {
 		};
 	} );
 
-	const developmentCopies = mapVendorCopies( vendors );
-	const minifiedCopies = mapVendorCopies( minifiedVendors );
-	const minifyCopies = mapVendorCopies( minifyVendors ).map( ( copyCommand ) => {
+	const developmentCopies = mapVendorCopies( vendors, buildTarget );
+	const minifiedCopies = mapVendorCopies( minifiedVendors, buildTarget );
+	const minifyCopies = mapVendorCopies( minifyVendors, buildTarget ).map( ( copyCommand ) => {
 		return {
 			...copyCommand,
 			transform: ( content ) => {
@@ -158,7 +160,7 @@ module.exports = function( env = { environment: 'production', watch: false } ) {
 
 	let cssCopies = packages.map( ( packageName ) => ( {
 		from: join( baseDir, `node_modules/@wordpress/${ packageName }/build-style/*.css` ),
-		to: join( baseDir, `build/styles/dist/${ packageName }/` ),
+		to: join( baseDir, `${ buildTarget }/css/dist/${ packageName }/` ),
 		flatten: true,
 		transform: ( content ) => {
 			if ( config.mode === 'production' ) {
@@ -190,7 +192,7 @@ module.exports = function( env = { environment: 'production', watch: false } ) {
 		}, {} ),
 		output: {
 			filename: `[basename]${ suffix }.js`,
-			path: join( baseDir, 'build/js/dist' ),
+			path: join( baseDir, `${ buildTarget }/js/dist` ),
 			library: {
 				root: [ 'wp', '[name]' ]
 			},