Created
March 4, 2020 08:02
-
-
Save ivankristianto/4514cae7f028f393d4a2d7201b8c4ab2 to your computer and use it in GitHub Desktop.
Webpack Config in WordPress
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| "devDependencies": { | |
| "@babel/cli": "^7.5.0", | |
| "@babel/core": "^7.5.4", | |
| "@babel/plugin-syntax-dynamic-import": "^7.2", | |
| "@babel/plugin-transform-runtime": "^7.6.0", | |
| "@babel/polyfill": "^7.6.0", | |
| "@babel/preset-env": "^7.6.0", | |
| "@babel/preset-react": "^7.0.0", | |
| "@babel/register": "^7.4.4", | |
| "@babel/traverse": "^7.5.5", | |
| "@wordpress/api-fetch": "^3.6.4", | |
| "@wordpress/babel-preset-default": "^4.5.0", | |
| "@wordpress/browserslist-config": "^2.6.0", | |
| "@wordpress/compose": "^3.7.2", | |
| "@wordpress/dom-ready": "^2.5.1", | |
| "@wordpress/element": "^2.8.2", | |
| "@wordpress/escape-html": "^1.5.1", | |
| "@wordpress/eslint-plugin": "^2.4.0", | |
| "@wordpress/hooks": "^2.6.0", | |
| "@wordpress/i18n": "^3.6.1", | |
| "@wordpress/library-export-default-webpack-plugin": "^1.1.0", | |
| "@wordpress/scripts": "^3.3.0", | |
| "@wordpress/url": "^2.8.2", | |
| "autoprefixer": "^9.5.0", | |
| "babel-eslint": "^10.0.3", | |
| "babel-loader": "^8.0.5", | |
| "babel-plugin-lodash": "^3.3.4", | |
| "classnames": "^2.2.6", | |
| "element-closest": "^2.0.2", | |
| "formdata-polyfill": "^3.0.17", | |
| "intl": "^1.2.5", | |
| "intl-locales-supported": "^1.6.0", | |
| "lodash": "^4.17.11", | |
| "lodash-webpack-plugin": "^0.11.5", | |
| "md5": "^2.2.1", | |
| "natives": "^1.1.6", | |
| "polyfill-library": "^3.31.1", | |
| "promise-polyfill": "^8.0.0", | |
| "terser-webpack-plugin": "^2.2.1", | |
| "url-polyfill": "^1.1.5", | |
| "webpack": "~4.28.3", | |
| "webpack-cli": "^3.3.0", | |
| "webpack-stream": "^5.2.1", | |
| "whatwg-fetch": "^3.0.0" | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const path = require( 'path' ); | |
| /** | |
| * WordPress dependencies | |
| */ | |
| const LibraryExportDefaultPlugin = require( '@wordpress/library-export-default-webpack-plugin' ); | |
| /** | |
| * Given a string, returns a new string with dash separators converted to | |
| * camel-case equivalent. This is not as aggressive as `_.camelCase` in | |
| * converting to uppercase, where Lodash will convert letters following | |
| * numbers. | |
| * | |
| * @param {string} string Input dash-delimited string. | |
| * | |
| * @return {string} Camel-cased string. | |
| */ | |
| function camelCaseDash( string ) { | |
| return string.replace( | |
| /-([a-z])/g, | |
| ( match, letter ) => letter.toUpperCase() | |
| ); | |
| } | |
| const externalPackages = [ | |
| 'api-fetch', | |
| 'compose', | |
| 'dom-ready', | |
| 'element', | |
| 'escape-html', | |
| 'hooks', | |
| 'i18n', | |
| 'url', | |
| ]; | |
| const externals = { | |
| react: 'React', | |
| 'react-dom': 'ReactDOM', | |
| tinymce: 'tinymce', | |
| moment: 'moment', | |
| jquery: 'jQuery', | |
| lodash: 'lodash', | |
| 'lodash-es': 'lodash', | |
| }; | |
| [ | |
| ...externalPackages, | |
| ].forEach( ( name ) => { | |
| externals[ `@wordpress/${ name }` ] = [ 'wp', camelCaseDash( name ) ]; | |
| } ); | |
| const externalEntry = {}; | |
| externalPackages.forEach( ( packageName ) => { | |
| const name = camelCaseDash( packageName ); | |
| externalEntry[ name ] = `./node_modules/@wordpress/${ packageName }`; | |
| } ); | |
| // This External Libraries will not be part of the wp object. Most of this is for Polyfill. | |
| const externalLibrary = { | |
| 'wp-polyfill': './node_modules/@babel/polyfill/dist/polyfill.js', | |
| 'wp-polyfill-fetch': './node_modules/whatwg-fetch/dist/fetch.umd.js', | |
| 'wp-polyfill-element-closest': './node_modules/element-closest/element-closest.js', | |
| 'wp-polyfill-node-contains': './node_modules/polyfill-library/polyfills/Node/prototype/contains/polyfill.js', | |
| 'wp-polyfill-formdata': './node_modules/formdata-polyfill/FormData.js', | |
| 'wp-polyfill-url': './node_modules/url-polyfill/url-polyfill.js', | |
| }; | |
| module.exports = ( env, argv ) => { | |
| return [ | |
| // Build the external wp libraries | |
| { | |
| entry: externalEntry, | |
| output: { | |
| filename: '[name].js', | |
| path: __dirname + '/dist/assets/js/externals', | |
| library: [ 'wp', '[name]' ], | |
| libraryTarget: 'this', | |
| }, | |
| plugins: [ | |
| new LibraryExportDefaultPlugin( [ | |
| 'api-fetch', | |
| 'dom-ready', | |
| ].map( camelCaseDash ) ), | |
| ], | |
| externals, | |
| }, | |
| // Build the external libraries | |
| { | |
| entry: externalLibrary, | |
| output: { | |
| filename: '[name].js', | |
| path: __dirname + '/dist/assets/js/externals', | |
| }, | |
| externals, | |
| }, | |
| ]; | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment