WordPress.org

Make WordPress Core

Ticket #49423: 49423-vendor-webpack.diff

File 49423-vendor-webpack.diff, 6.4 KB (added by aduth, 4 months ago)
  • package.json

    diff --git a/package.json b/package.json
    index 97029bd35c..73e1b02587 100644
    a b  
    6363                "matchdep": "~2.0.0",
    6464                "node-sass": "~4.12.0",
    6565                "source-map-loader": "^0.2.4",
    66                 "uglify-js": "^3.6.0",
    6766                "uglifyjs-webpack-plugin": "2.2.0",
    6867                "wait-on": "3.3.0",
    6968                "webpack": "4.41.0",
  • tools/webpack/packages.js

    diff --git a/tools/webpack/packages.js b/tools/webpack/packages.js
    index bf05904e61..ed12fbba05 100644
    a b const { DefinePlugin } = require( 'webpack' ); 
    55const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
    66const LiveReloadPlugin = require( 'webpack-livereload-plugin' );
    77const postcss = require( 'postcss' );
    8 const UglifyJS = require( 'uglify-js' );
    9 
    108const { join, basename } = require( 'path' );
    119const { get } = require( 'lodash' );
    1210
    function camelCaseDash( string ) { 
    4139        );
    4240}
    4341
    44 /**
    45  * Maps vendors to copy commands for the CopyWebpackPlugin.
    46  *
    47  * @param {Object} vendors     Vendors to include in the vendor folder.
    48  * @param {string} buildTarget The folder in which to build the packages.
    49  *
    50  * @return {Object[]} Copy object suitable for the CopyWebpackPlugin.
    51  */
    52 function mapVendorCopies( vendors, buildTarget ) {
    53         return Object.keys( vendors ).map( ( filename ) => ( {
    54                 from: join( baseDir, `node_modules/${ vendors[ filename ] }` ),
    55                 to: join( baseDir, `${ buildTarget }/js/dist/vendor/${ filename }` ),
    56         } ) );
    57 }
    58 
    5942module.exports = function( env = { environment: 'production', watch: false, buildTarget: false } ) {
    6043        const mode = env.environment;
    6144        const suffix = mode === 'production' ? '.min' : '';
    module.exports = function( env = { environment: 'production', watch: false, buil 
    7154                )
    7255                .map( ( packageName ) => packageName.replace( WORDPRESS_NAMESPACE, '' ) );
    7356
    74         const vendors = {
    75                 'lodash.js': 'lodash/lodash.js',
    76                 'wp-polyfill.js': '@babel/polyfill/dist/polyfill.js',
    77                 'wp-polyfill-fetch.js': 'whatwg-fetch/dist/fetch.umd.js',
    78                 'wp-polyfill-element-closest.js': 'element-closest/element-closest.js',
    79                 'wp-polyfill-node-contains.js': 'polyfill-library/polyfills/Node/prototype/contains/polyfill.js',
    80                 'wp-polyfill-url.js': 'polyfill-library/polyfills/URL/polyfill.js',
    81                 'wp-polyfill-dom-rect.js': 'polyfill-library/polyfills/DOMRect/polyfill.js',
    82                 'wp-polyfill-formdata.js': 'formdata-polyfill/FormData.js',
    83                 'moment.js': 'moment/moment.js',
    84                 'react.js': 'react/umd/react.development.js',
    85                 'react-dom.js': 'react-dom/umd/react-dom.development.js',
    86         };
    87 
    88         const minifiedVendors = {
    89                 'lodash.min.js': 'lodash/lodash.min.js',
    90                 'wp-polyfill.min.js': '@babel/polyfill/dist/polyfill.min.js',
    91                 'wp-polyfill-formdata.min.js': 'formdata-polyfill/formdata.min.js',
    92                 'moment.min.js': 'moment/min/moment.min.js',
    93                 'react.min.js': 'react/umd/react.production.min.js',
    94                 'react-dom.min.js': 'react-dom/umd/react-dom.production.min.js',
    95         };
    96 
    97         const minifyVendors = {
    98                 'wp-polyfill-fetch.min.js': 'whatwg-fetch/dist/fetch.umd.js',
    99                 'wp-polyfill-element-closest.min.js': 'element-closest/element-closest.js',
    100                 'wp-polyfill-node-contains.min.js': 'polyfill-library/polyfills/Node/prototype/contains/polyfill.js',
    101                 'wp-polyfill-url.min.js': 'polyfill-library/polyfills/URL/polyfill.js',
    102                 'wp-polyfill-dom-rect.min.js': 'polyfill-library/polyfills/DOMRect/polyfill.js',
    103         };
    104 
    10557        const blockNames = [
    10658                'archives',
    10759                'block',
    module.exports = function( env = { environment: 'production', watch: false, buil 
    12880                to: join( baseDir, `${ buildTarget }/blocks/[1]/block.json` ),
    12981        };
    13082
    131         const developmentCopies = mapVendorCopies( vendors, buildTarget );
    132         const minifiedCopies = mapVendorCopies( minifiedVendors, buildTarget );
    133         const minifyCopies = mapVendorCopies( minifyVendors, buildTarget ).map( ( copyCommand ) => {
    134                 return {
    135                         ...copyCommand,
    136                         transform: ( content ) => {
    137                                 return UglifyJS.minify( content.toString() ).code;
    138                         },
    139                 };
    140         } );
    141 
    142         let vendorCopies = mode === "development" ? developmentCopies : [ ...minifiedCopies, ...minifyCopies ];
    143 
    14483        let cssCopies = packages.map( ( packageName ) => ( {
    14584                from: join( baseDir, `node_modules/@wordpress/${ packageName }/build-style/*.css` ),
    14685                to: join( baseDir, `${ buildTarget }/css/dist/${ packageName }/` ),
    module.exports = function( env = { environment: 'production', watch: false, buil 
    248187                        } ),
    249188                        new CopyWebpackPlugin(
    250189                                [
    251                                         ...vendorCopies,
    252190                                        ...cssCopies,
    253191                                        ...phpCopies,
    254192                                        blockMetadataCopies,
  • new file tools/webpack/vendor.js

    diff --git a/tools/webpack/vendor.js b/tools/webpack/vendor.js
    new file mode 100644
    index 0000000000..f06fcc67a6
    - +  
     1/**
     2 * External dependencies
     3 */
     4const { join } = require( 'path' );
     5
     6module.exports = function( env = { environment: 'production', watch: false, buildTarget: false } ) {
     7        const mode = env.environment;
     8        const suffix = mode === 'production' ? '.min' : '';
     9        const buildTarget = env.buildTarget || ( mode === 'production' ? 'build' : 'src' );
     10
     11        return {
     12                mode,
     13
     14                entry: {
     15                        lodash: 'lodash',
     16                        'wp-polyfill': '@babel/polyfill',
     17                        'wp-polyfill-fetch': 'whatwg-fetch',
     18                        'wp-polyfill-element-closest': 'element-closest',
     19                        'wp-polyfill-node-contains': 'polyfill-library/polyfills/Node/prototype/contains/polyfill.js',
     20                        'wp-polyfill-url': 'polyfill-library/polyfills/URL/polyfill.js',
     21                        'wp-polyfill-dom-rect': 'polyfill-library/polyfills/DOMRect/polyfill.js',
     22                        'wp-polyfill-formdata': 'formdata-polyfill',
     23                        'moment': 'moment',
     24                        'react': 'react',
     25                        'react-dom': 'react-dom',
     26                },
     27
     28                output: {
     29                        filename: `[name]${ suffix }.js`,
     30                        path: join( __dirname, `../../${ buildTarget }/wp-includes/js/dist` ),
     31                },
     32
     33                stats: {
     34                        children: false,
     35                },
     36
     37                watch: env.watch,
     38        };
     39};
  • webpack.config.js

    diff --git a/webpack.config.js b/webpack.config.js
    index bc6ab59bee..c5372a23c9 100644
    a b  
    11const mediaConfig = require( './tools/webpack/media' );
    22const packagesConfig = require( './tools/webpack/packages' );
     3const vendorConfig = require( './tools/webpack/vendor' );
    34
    45module.exports = function( env = { environment: "production", watch: false, buildTarget: false } ) {
    56        if ( ! env.watch ) {
    module.exports = function( env = { environment: "production", watch: false, buil 
    1314        const config = [
    1415                mediaConfig( env ),
    1516                packagesConfig( env ),
     17                vendorConfig( env ),
    1618        ];
    1719
    1820        return config;