Ticket #49423: 49423-latest.diff

package.json

@@ -69 +69 @@
                 "sinon": "~9.0.0",
                 "sinon-test": "~3.0.0",
                 "source-map-loader": "^0.2.4",
-                "uglify-js": "^3.6.0",
                 "uglifyjs-webpack-plugin": "2.2.0",
                 "wait-on": "3.3.0",
                 "webpack": "4.43.0",

tools/webpack/packages.js

@@ -5 +5 @@
 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' );
@@ -41 +40 @@
         );
 }
 
-/**
- * Maps vendors to copy commands for the CopyWebpackPlugin.
- *
- * @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, buildTarget ) {
-        return Object.keys( vendors ).map( ( filename ) => ( {
-                from: join( baseDir, `node_modules/${ vendors[ filename ] }` ),
-                to: join( baseDir, `${ buildTarget }/js/dist/vendor/${ filename }` ),
-        } ) );
-}
 
 module.exports = function( env = { environment: 'production', watch: false, buildTarget: false } ) {
         const mode = env.environment;
@@ -71 +56 @@
                 )
                 .map( ( packageName ) => packageName.replace( WORDPRESS_NAMESPACE, '' ) );
 
-        const vendors = {
-                'lodash.js': 'lodash/lodash.js',
-                'wp-polyfill.js': '@babel/polyfill/dist/polyfill.js',
-                'wp-polyfill-fetch.js': 'whatwg-fetch/dist/fetch.umd.js',
-                'wp-polyfill-element-closest.js': 'element-closest/element-closest.js',
-                'wp-polyfill-node-contains.js': 'polyfill-library/polyfills/Node/prototype/contains/polyfill.js',
-                'wp-polyfill-url.js': 'core-js-url-browser/url.js',
-                'wp-polyfill-dom-rect.js': 'polyfill-library/polyfills/DOMRect/polyfill.js',
-                'wp-polyfill-formdata.js': 'formdata-polyfill/FormData.js',
-                'moment.js': 'moment/moment.js',
-                'react.js': 'react/umd/react.development.js',
-                'react-dom.js': 'react-dom/umd/react-dom.development.js',
-        };
-
-        const minifiedVendors = {
-                'lodash.min.js': 'lodash/lodash.min.js',
-                'wp-polyfill.min.js': '@babel/polyfill/dist/polyfill.min.js',
-                'wp-polyfill-formdata.min.js': 'formdata-polyfill/formdata.min.js',
-                'wp-polyfill-url.min.js': 'core-js-url-browser/url.min.js',
-                'moment.min.js': 'moment/min/moment.min.js',
-                'react.min.js': 'react/umd/react.production.min.js',
-                'react-dom.min.js': 'react-dom/umd/react-dom.production.min.js',
-        };
-
-        const minifyVendors = {
-                'wp-polyfill-fetch.min.js': 'whatwg-fetch/dist/fetch.umd.js',
-                'wp-polyfill-element-closest.min.js': 'element-closest/element-closest.js',
-                'wp-polyfill-node-contains.min.js': 'polyfill-library/polyfills/Node/prototype/contains/polyfill.js',
-                'wp-polyfill-dom-rect.min.js': 'polyfill-library/polyfills/DOMRect/polyfill.js',
-        };
-
         const dynamicBlockFolders = [
                 'archives',
                 'block',
@@ -162 +116 @@
                 } , {} ),
         };
 
-        const developmentCopies = mapVendorCopies( vendors, buildTarget );
-        const minifiedCopies = mapVendorCopies( minifiedVendors, buildTarget );
-        const minifyCopies = mapVendorCopies( minifyVendors, buildTarget ).map( ( copyCommand ) => {
-                return {
-                        ...copyCommand,
-                        transform: ( content ) => {
-                                return UglifyJS.minify( content.toString() ).code;
-                        },
-                };
-        } );
-
-        let vendorCopies = mode === "development" ? developmentCopies : [ ...minifiedCopies, ...minifyCopies ];
-
         let cssCopies = packages.map( ( packageName ) => ( {
                 from: join( baseDir, `node_modules/@wordpress/${ packageName }/build-style/*.css` ),
                 to: join( baseDir, `${ buildTarget }/css/dist/${ packageName }/` ),
@@ -290 +231 @@
                         } ),
                         new CopyWebpackPlugin(
                                 [
-                                        ...vendorCopies,
                                         ...cssCopies,
                                         ...phpCopies,
                                         ...blockMetadataCopies,

tools/webpack/vendor.js

@@ +1 @@
+/**
+ * External dependencies
+ */
+const { join } = require( 'path' );
+
+module.exports = function( env = { environment: 'production', watch: false, buildTarget: false } ) {
+        const mode = env.environment;
+        const suffix = mode === 'production' ? '.min' : '';
+        const buildTarget = env.buildTarget || ( mode === 'production' ? 'build' : 'src' );
+
+        return {
+                mode,
+
+                entry: {
+                        lodash: 'lodash',
+                        'wp-polyfill': '@babel/polyfill',
+                        'wp-polyfill-fetch': 'whatwg-fetch',
+                        'wp-polyfill-element-closest': 'element-closest',
+                        'wp-polyfill-node-contains': 'polyfill-library/polyfills/Node/prototype/contains/polyfill.js',
+                        'wp-polyfill-url': 'core-js-url-browser',
+                        'wp-polyfill-dom-rect': 'polyfill-library/polyfills/DOMRect/polyfill.js',
+                        'wp-polyfill-formdata': 'formdata-polyfill',
+                        'moment': 'moment',
+                        'react': 'react',
+                        'react-dom': 'react-dom',
+                },
+
+                output: {
+                        filename: `[name]${ suffix }.js`,
+                        path: join( __dirname, `../../${ buildTarget }/wp-includes/js/dist/vendor` ),
+                },
+
+                stats: {
+                        children: false,
+                },
+
+                watch: env.watch,
+        };
+};

webpack.config.js

@@ -1 +1 @@
 const mediaConfig = require( './tools/webpack/media' );
 const packagesConfig = require( './tools/webpack/packages' );
+const vendorConfig = require( './tools/webpack/vendor' );
 
 module.exports = function( env = { environment: "production", watch: false, buildTarget: false } ) {
         if ( ! env.watch ) {
@@ -13 +14 @@
         const config = [
                 mediaConfig( env ),
                 packagesConfig( env ),
+                vendorConfig( env ),
         ];
 
         return config;