Use webpack-config package directly

webpack-config/.npmrc

@@ -0,0 +1 @@
+package-lock=false

webpack-config/README.md

@@ -0,0 +1,3 @@
+## webpack config example plugin
+
+WordPress plugin to showcase how to work with webpack-config package.

webpack-config/index.php

@@ -0,0 +1,22 @@
+<?php
+
+/**
+ * Plugin Name: Understanding Gutenberg: webpack-config
+ * Plugin URI: https://github.com/nosolosw/understanding-gutenberg
+ * Description: Plugin to showcase how to work with webpack-config.
+ * Version: 0.0.1
+ */
+
+function webpack_config_plugin_script_register() {
+	wp_register_script(
+		'webpack-config-plugin-block',
+		plugins_url( 'index.build.js', __FILE__ ),
+		array( 'wp-blocks', 'wp-element' )
+	);
+}
+add_action( 'init', 'webpack_config_plugin_script_register' );
+
+function webpack_config_plugin_script_enqueue() {
+	wp_enqueue_script( 'webpack-config-plugin-block' );
+}
+add_action( 'enqueue_block_editor_assets', 'webpack_config_plugin_script_enqueue' );

webpack-config/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "webpack-config",
+  "version": "1.0.0",
+  "description": "Plugin to showcase how to work with webpack-config.",
+  "author": "WordPress contributors",
+  "license": "GPL-2.0-or-later",
+  "keywords": [
+    "wordpress",
+    "webpack-config"
+  ],
+  "homepage": "https://github.com/nosolosw/understanding-gutenberg#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nosolosw/understanding-gutenberg.git"
+  },
+  "bugs": {
+    "url": "https://github.com/nosolosw/understanding-gutenberg/issues"
+  },
+  "main": "index.js",
+  "devDependencies": {
+    "@babel/core": "7.3.3",
+    "@wordpress/webpack-config": "file:../../gutenberg/packages/webpack-config",
+    "babel-loader": "8.0.5",
+    "source-map-loader": "0.2.4",
+    "webpack": "4.29.5",
+    "webpack-cli": "3.2.3"
+  },
+  "scripts": {
+    "build": "webpack --config webpack.config.js"
+  },
+  "dependencies": {}
+}

webpack-config/src/index.js

@@ -0,0 +1,37 @@
+( function( wp ) {
+    var el = wp.element.createElement;
+    var onChangeHandler = function( props) {
+        return function( event ) {
+            props.setAttributes( { activity: event.target.value, } );
+        }
+    }
+    wp.blocks.registerBlockType( 'blockexample-plugin/block', {
+        title: 'Love',
+        icon: 'heart',
+        category: 'common',
+        attributes: {
+            activity: {
+                type: 'string',
+            },
+        },
+        edit: function( props ) {
+            if ( props.isSelected ) {
+                return (
+                    <input
+                        onChange={ onChangeHandler( props ) }
+                        value={ props.attributes.activity || '' }
+                        />
+                );
+            } else {
+                return (
+                    <p>'I ♥ ' + props.attributes.activity + '.'</p>
+                );
+            }
+        },
+        save: function( props ) {
+            return (
+                <p>'I ♥ ' + props.attributes.activity + '.'</p>
+            );
+        },
+    } );
+} )( window.wp );

webpack-config/webpack.config.js

@@ -0,0 +1,5 @@
+const { config } = require( '@wordpress/webpack-config' );
+
+module.exports = Object.assign( {}, config, {
+	// apply your changes here
+} );