Ticket #49423: 49423-vendor-webpack.diff
File 49423-vendor-webpack.diff, 6.4 KB (added by , 5 years ago) |
---|
-
package.json
diff --git a/package.json b/package.json index 97029bd35c..73e1b02587 100644
a b 63 63 "matchdep": "~2.0.0", 64 64 "node-sass": "~4.12.0", 65 65 "source-map-loader": "^0.2.4", 66 "uglify-js": "^3.6.0",67 66 "uglifyjs-webpack-plugin": "2.2.0", 68 67 "wait-on": "3.3.0", 69 68 "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' ); 5 5 const CopyWebpackPlugin = require( 'copy-webpack-plugin' ); 6 6 const LiveReloadPlugin = require( 'webpack-livereload-plugin' ); 7 7 const postcss = require( 'postcss' ); 8 const UglifyJS = require( 'uglify-js' );9 10 8 const { join, basename } = require( 'path' ); 11 9 const { get } = require( 'lodash' ); 12 10 … … function camelCaseDash( string ) { 41 39 ); 42 40 } 43 41 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 59 42 module.exports = function( env = { environment: 'production', watch: false, buildTarget: false } ) { 60 43 const mode = env.environment; 61 44 const suffix = mode === 'production' ? '.min' : ''; … … module.exports = function( env = { environment: 'production', watch: false, buil 71 54 ) 72 55 .map( ( packageName ) => packageName.replace( WORDPRESS_NAMESPACE, '' ) ); 73 56 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 105 57 const blockNames = [ 106 58 'archives', 107 59 'block', … … module.exports = function( env = { environment: 'production', watch: false, buil 128 80 to: join( baseDir, `${ buildTarget }/blocks/[1]/block.json` ), 129 81 }; 130 82 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 144 83 let cssCopies = packages.map( ( packageName ) => ( { 145 84 from: join( baseDir, `node_modules/@wordpress/${ packageName }/build-style/*.css` ), 146 85 to: join( baseDir, `${ buildTarget }/css/dist/${ packageName }/` ), … … module.exports = function( env = { environment: 'production', watch: false, buil 248 187 } ), 249 188 new CopyWebpackPlugin( 250 189 [ 251 ...vendorCopies,252 190 ...cssCopies, 253 191 ...phpCopies, 254 192 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 */ 4 const { join } = require( 'path' ); 5 6 module.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 1 1 const mediaConfig = require( './tools/webpack/media' ); 2 2 const packagesConfig = require( './tools/webpack/packages' ); 3 const vendorConfig = require( './tools/webpack/vendor' ); 3 4 4 5 module.exports = function( env = { environment: "production", watch: false, buildTarget: false } ) { 5 6 if ( ! env.watch ) { … … module.exports = function( env = { environment: "production", watch: false, buil 13 14 const config = [ 14 15 mediaConfig( env ), 15 16 packagesConfig( env ), 17 vendorConfig( env ), 16 18 ]; 17 19 18 20 return config;