Webpack Config in WordPress

devDependencies.js

"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"
}

webpack.config.js

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,
		},
	];
};