Apply more tweaks to the way webpack config package is structured

package.json

@@ -72,7 +72,6 @@
 		"@wordpress/postcss-themes": "file:packages/postcss-themes",
 		"@wordpress/scripts": "file:packages/scripts",
 		"@wordpress/webpack-config": "file:packages/webpack-config",
-		"babel-loader": "8.0.0",
 		"benchmark": "2.1.4",
 		"browserslist": "4.4.1",
 		"chalk": "2.4.1",
@@ -111,7 +110,6 @@
 		"shallow-equals": "1.0.0",
 		"shallowequal": "1.1.0",
 		"sprintf-js": "1.1.1",
-		"source-map-loader": "0.2.3",
 		"stylelint-config-wordpress": "13.1.0",
 		"uuid": "3.3.2",
 		"webpack-rtl-plugin": "github:yoavf/webpack-rtl-plugin#develop"

packages/webpack-config/README.md

@@ -10,4 +10,16 @@ Install the module
 npm install @wordpress/webpack-config --save-dev
 ```
 
+## Usage
+
+This is how to extend the default WordPress config for Webpack. You have to create your own `webpack.config.js` file in the root of your project, import the config and extend it with your custom settings as follows:
+
+```js
+const { config } = require( '@wordpress/webpack-config' );
+
+module.exports = Object.assign( {}, config, {
+	// apply your changes here
+} );
+```
+
 <br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>

packages/webpack-config/config.js

@@ -0,0 +1,103 @@
+/**
+ * External dependencies
+ */
+const { BundleAnalyzerPlugin } = require( 'webpack-bundle-analyzer' );
+const LiveReloadPlugin = require( 'webpack-livereload-plugin' );
+
+/**
+ * Internal dependencies
+ */
+const { camelCaseDash } = require( './utils' );
+
+/**
+ * Converts @wordpress require into window reference.
+ *
+ * Note this isn't the same as camel case because of the
+ * way that numbers don't trigger the capitalized next letter.
+ *
+ * @example
+ * wordpressRequire( '@wordpress/api-fetch' ) = 'wp.apiFetch'
+ * wordpressRequire( '@wordpress/i18n' ) = 'wp.i18n'
+ *
+ * @param {string} request import name
+ * @return {string} global variable reference for import
+ */
+const wordpressRequire = ( request ) => {
+	// @wordpress/components -> [ @wordpress, components ]
+	const [ , name ] = request.split( '/' );
+
+	// components -> wp.components
+	return `wp.${ camelCaseDash( name ) }`;
+};
+
+const wordpressExternals = ( context, request, callback ) =>
+	/^@wordpress\//.test( request ) ?
+		callback( null, `root ${ wordpressRequire( request ) }` ) :
+		callback();
+
+const externals = [
+	{
+		react: 'React',
+		'react-dom': 'ReactDOM',
+		tinymce: 'tinymce',
+		moment: 'moment',
+		jquery: 'jQuery',
+		lodash: 'lodash',
+		'lodash-es': 'lodash',
+	},
+	wordpressExternals,
+];
+
+const isProduction = process.env.NODE_ENV === 'production';
+const mode = isProduction ? 'production' : 'development';
+
+const config = {
+	mode,
+	externals,
+	resolve: {
+		modules: [
+			process.cwd(),
+			'node_modules',
+		],
+		alias: {
+			'lodash-es': 'lodash',
+		},
+	},
+	module: {
+		rules: [
+			{
+				test: /\.js$/,
+				use: [ 'source-map-loader' ],
+				enforce: 'pre',
+			},
+			{
+				test: /\.js$/,
+				exclude: [
+					/block-serialization-spec-parser/,
+					/is-shallow-equal/,
+					/node_modules/,
+				],
+				use: 'babel-loader',
+			},
+		],
+	},
+	plugins: [
+		// GUTENBERG_BUNDLE_ANALYZER global variable enables utility that represents bundle content
+		// as convenient interactive zoomable treemap.
+		process.env.GUTENBERG_BUNDLE_ANALYZER && new BundleAnalyzerPlugin(),
+		// GUTENBERG_LIVE_RELOAD_PORT global variable changes port on which live reload works
+		// when running watch mode.
+		! isProduction && new LiveReloadPlugin( { port: process.env.GUTENBERG_LIVE_RELOAD_PORT || 35729 } ),
+	].filter( Boolean ),
+	stats: {
+		children: false,
+	},
+};
+
+if ( ! isProduction ) {
+	// GUTENBERG_DEVTOOL global variable controls how source maps are generated.
+	// See: https://webpack.js.org/configuration/devtool/#devtool.
+	config.devtool = process.env.GUTENBERG_DEVTOOL || 'source-map';
+}
+
+module.exports = config;

packages/webpack-config/index.js

@@ -1,104 +1,10 @@
 /**
- * External dependencies
+ * Internal dependencies
  */
-const { BundleAnalyzerPlugin } = require( 'webpack-bundle-analyzer' );
-const LiveReloadPlugin = require( 'webpack-livereload-plugin' );
+const { camelCaseDash } = require( './utils' );
+const config = require( './config' );
 
-/**
- * Converts @wordpress require into window reference
- *
- * Note this isn't the same as camel case because of the
- * way that numbers don't trigger the capitalized next letter
- *
- * @example
- * wordpressRequire( '@wordpress/api-fetch' ) = 'wp.apiFetch'
- * wordpressRequire( '@wordpress/i18n' ) = 'wp.i18n'
- *
- * @param {string} request import name
- * @return {string} global variable reference for import
- */
-const wordpressRequire = ( request ) => {
-	// @wordpress/components -> [ @wordpress, components ]
-	const [ , name ] = request.split( '/' );
-
-	// components -> wp.components
-	return `wp.${ name.replace( /-([a-z])/g, ( match, letter ) => letter.toUpperCase() ) }`;
-};
-
-const wordpressExternals = ( context, request, callback ) =>
-	/^@wordpress\//.test( request ) ?
-		callback( null, `root ${ wordpressRequire( request ) }` ) :
-		callback();
-
-const externals = [
-	{
-		react: 'React',
-		'react-dom': 'ReactDOM',
-		tinymce: 'tinymce',
-		moment: 'moment',
-		jquery: 'jQuery',
-		lodash: 'lodash',
-		'lodash-es': 'lodash',
-	},
-	wordpressExternals,
-];
-
-const isProduction = process.env.NODE_ENV === 'production';
-const mode = isProduction ? 'production' : 'development';
-
-const config = {
-	mode,
-	output: {
-		filename: './build/[basename]/index.js',
-		path: process.cwd(),
-		library: [ 'wp', '[name]' ],
-		libraryTarget: 'this',
-	},
-	externals,
-	resolve: {
-		modules: [
-			process.cwd(),
-			'node_modules',
-		],
-		alias: {
-			'lodash-es': 'lodash',
-		},
-	},
-	module: {
-		rules: [
-			{
-				test: /\.js$/,
-				use: [ 'source-map-loader' ],
-				enforce: 'pre',
-			},
-			{
-				test: /\.js$/,
-				exclude: [
-					/block-serialization-spec-parser/,
-					/is-shallow-equal/,
-					/node_modules/,
-				],
-				use: 'babel-loader',
-			},
-		],
-	},
-	plugins: [
-		// GUTENBERG_BUNDLE_ANALYZER global variable enables utility that represents bundle content
-		// as convenient interactive zoomable treemap.
-		process.env.GUTENBERG_BUNDLE_ANALYZER && new BundleAnalyzerPlugin(),
-		// GUTENBERG_LIVE_RELOAD_PORT global variable changes port on which live reload works
-		// when running watch mode.
-		! isProduction && new LiveReloadPlugin( { port: process.env.GUTENBERG_LIVE_RELOAD_PORT || 35729 } ),
-	].filter( Boolean ),
-	stats: {
-		children: false,
-	},
+module.exports = {
+	camelCaseDash,
+	config,
 };
-
-if ( ! isProduction ) {
-	// GUTENBERG_DEVTOOL global variable controls how source maps are generated.
-	// See: https://webpack.js.org/configuration/devtool/#devtool.
-	config.devtool = process.env.GUTENBERG_DEVTOOL || 'source-map';
-}
-
-module.exports = config;

packages/webpack-config/package.json

@@ -23,6 +23,8 @@
 	},
 	"main": "index.js",
 	"dependencies": {
+		"babel-loader": "^8.0.5",
+		"source-map-loader": "^0.2.4",
 		"webpack-bundle-analyzer": "^3.0.3",
 		"webpack-livereload-plugin": "^2.2.0"
 	},