diff --git a/webpack-config/.npmrc b/webpack-config/.npmrc
new file mode 100644
index 0000000..43c97e7
--- /dev/null
+++ b/webpack-config/.npmrc
@@ -0,0 +1 @@
+package-lock=false
diff --git a/webpack-config/README.md b/webpack-config/README.md
new file mode 100644
index 0000000..eef6e74
--- /dev/null
+++ b/webpack-config/README.md
@@ -0,0 +1,3 @@
+## webpack config example plugin
+
+WordPress plugin to showcase how to work with webpack-config package.
diff --git a/webpack-config/build/index.js b/webpack-config/build/index.js
new file mode 100644
index 0000000..0a2c6a2
--- /dev/null
+++ b/webpack-config/build/index.js
@@ -0,0 +1,101 @@
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = "./src/index.js");
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ "./src/index.js":
+/*!**********************!*\
+  !*** ./src/index.js ***!
+  \**********************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+throw new Error("Module build failed (from ./node_modules/babel-loader/lib/index.js):\nSyntaxError: /home/andres/src/understanding-gutenberg/webpack-config/src/index.js: Unexpected token (20:20)\n\n\u001b[0m \u001b[90m 18 | \u001b[39m            \u001b[36mif\u001b[39m ( props\u001b[33m.\u001b[39misSelected ) {\u001b[0m\n\u001b[0m \u001b[90m 19 | \u001b[39m                \u001b[36mreturn\u001b[39m (\u001b[0m\n\u001b[0m\u001b[31m\u001b[1m>\u001b[22m\u001b[39m\u001b[90m 20 | \u001b[39m                    \u001b[33m<\u001b[39m\u001b[33minput\u001b[39m\u001b[0m\n\u001b[0m \u001b[90m    | \u001b[39m                    \u001b[31m\u001b[1m^\u001b[22m\u001b[39m\u001b[0m\n\u001b[0m \u001b[90m 21 | \u001b[39m                        onChange\u001b[33m=\u001b[39m{ onChangeHandler( props ) }\u001b[0m\n\u001b[0m \u001b[90m 22 | \u001b[39m                        value\u001b[33m=\u001b[39m{ props\u001b[33m.\u001b[39mattributes\u001b[33m.\u001b[39mactivity \u001b[33m||\u001b[39m \u001b[32m''\u001b[39m }\u001b[0m\n\u001b[0m \u001b[90m 23 | \u001b[39m                        \u001b[33m/\u001b[39m\u001b[33m>\u001b[39m\u001b[0m\n    at Parser.raise (/home/andres/src/understanding-gutenberg/webpack-config/node_modules/@babel/parser/lib/index.js:3831:17)\n    at Parser.unexpected (/home/andres/src/understanding-gutenberg/webpack-config/node_modules/@babel/parser/lib/index.js:5143:16)\n    at Parser.parseExprAtom (/home/andres/src/understanding-gutenberg/webpack-config/node_modules/@babel/parser/lib/index.js:6283:20)\n    at Parser.parseExprSubscripts (/home/andres/src/understanding-gutenberg/webpack-config/node_modules/@babel/parser/lib/index.js:5862:23)\n    at Parser.parseMaybeUnary (/home/andres/src/understanding-gutenberg/webpack-config/node_modules/@babel/parser/lib/index.js:5842:21)\n    at Parser.parseExprOps (/home/andres/src/understanding-gutenberg/webpack-config/node_modules/@babel/parser/lib/index.js:5729:23)\n    at Parser.parseMaybeConditional (/home/andres/src/understanding-gutenberg/webpack-config/node_modules/@babel/parser/lib/index.js:5702:23)\n    at Parser.parseMaybeAssign (/home/andres/src/understanding-gutenberg/webpack-config/node_modules/@babel/parser/lib/index.js:5647:21)\n    at Parser.parseParenAndDistinguishExpression (/home/andres/src/understanding-gutenberg/webpack-config/node_modules/@babel/parser/lib/index.js:6435:28)\n    at Parser.parseExprAtom (/home/andres/src/understanding-gutenberg/webpack-config/node_modules/@babel/parser/lib/index.js:6215:21)\n    at Parser.parseExprSubscripts (/home/andres/src/understanding-gutenberg/webpack-config/node_modules/@babel/parser/lib/index.js:5862:23)\n    at Parser.parseMaybeUnary (/home/andres/src/understanding-gutenberg/webpack-config/node_modules/@babel/parser/lib/index.js:5842:21)\n    at Parser.parseExprOps (/home/andres/src/understanding-gutenberg/webpack-config/node_modules/@babel/parser/lib/index.js:5729:23)\n    at Parser.parseMaybeConditional (/home/andres/src/understanding-gutenberg/webpack-config/node_modules/@babel/parser/lib/index.js:5702:23)\n    at Parser.parseMaybeAssign (/home/andres/src/understanding-gutenberg/webpack-config/node_modules/@babel/parser/lib/index.js:5647:21)\n    at Parser.parseExpression (/home/andres/src/understanding-gutenberg/webpack-config/node_modules/@babel/parser/lib/index.js:5595:23)\n    at Parser.parseReturnStatement (/home/andres/src/understanding-gutenberg/webpack-config/node_modules/@babel/parser/lib/index.js:7617:28)\n    at Parser.parseStatementContent (/home/andres/src/understanding-gutenberg/webpack-config/node_modules/@babel/parser/lib/index.js:7295:21)\n    at Parser.parseStatement (/home/andres/src/understanding-gutenberg/webpack-config/node_modules/@babel/parser/lib/index.js:7243:17)\n    at Parser.parseBlockOrModuleBlockBody (/home/andres/src/understanding-gutenberg/webpack-config/node_modules/@babel/parser/lib/index.js:7810:25)\n    at Parser.parseBlockBody (/home/andres/src/understanding-gutenberg/webpack-config/node_modules/@babel/parser/lib/index.js:7797:10)\n    at Parser.parseBlock (/home/andres/src/understanding-gutenberg/webpack-config/node_modules/@babel/parser/lib/index.js:7786:10)\n    at Parser.parseStatementContent (/home/andres/src/understanding-gutenberg/webpack-config/node_modules/@babel/parser/lib/index.js:7319:21)\n    at Parser.parseStatement (/home/andres/src/understanding-gutenberg/webpack-config/node_modules/@babel/parser/lib/index.js:7243:17)\n    at Parser.parseIfStatement (/home/andres/src/understanding-gutenberg/webpack-config/node_modules/@babel/parser/lib/index.js:7602:28)\n    at Parser.parseStatementContent (/home/andres/src/understanding-gutenberg/webpack-config/node_modules/@babel/parser/lib/index.js:7292:21)\n    at Parser.parseStatement (/home/andres/src/understanding-gutenberg/webpack-config/node_modules/@babel/parser/lib/index.js:7243:17)\n    at Parser.parseBlockOrModuleBlockBody (/home/andres/src/understanding-gutenberg/webpack-config/node_modules/@babel/parser/lib/index.js:7810:25)\n    at Parser.parseBlockBody (/home/andres/src/understanding-gutenberg/webpack-config/node_modules/@babel/parser/lib/index.js:7797:10)\n    at Parser.parseBlock (/home/andres/src/understanding-gutenberg/webpack-config/node_modules/@babel/parser/lib/index.js:7786:10)");
+
+/***/ })
+
+/******/ });
+//# sourceMappingURL=index.js.map
\ No newline at end of file
diff --git a/webpack-config/build/index.js.map b/webpack-config/build/index.js.map
new file mode 100644
index 0000000..d3822d0
--- /dev/null
+++ b/webpack-config/build/index.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["webpack:///webpack/bootstrap"],"names":[],"mappings":";AAAA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,kDAA0C,gCAAgC;AAC1E;AACA;;AAEA;AACA;AACA;AACA,gEAAwD,kBAAkB;AAC1E;AACA,yDAAiD,cAAc;AAC/D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iDAAyC,iCAAiC;AAC1E,wHAAgH,mBAAmB,EAAE;AACrI;AACA;;AAEA;AACA;AACA;AACA,mCAA2B,0BAA0B,EAAE;AACvD,yCAAiC,eAAe;AAChD;AACA;AACA;;AAEA;AACA,8DAAsD,+DAA+D;;AAErH;AACA;;;AAGA;AACA","file":"index.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = \"./src/index.js\");\n"],"sourceRoot":""}
\ No newline at end of file
diff --git a/webpack-config/index.php b/webpack-config/index.php
new file mode 100644
index 0000000..554fc30
--- /dev/null
+++ b/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' );
diff --git a/webpack-config/package.json b/webpack-config/package.json
new file mode 100644
index 0000000..a163781
--- /dev/null
+++ b/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": {}
+}
diff --git a/webpack-config/src/index.js b/webpack-config/src/index.js
new file mode 100644
index 0000000..8d95032
--- /dev/null
+++ b/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 );
diff --git a/webpack-config/webpack.config.js b/webpack-config/webpack.config.js
new file mode 100644
index 0000000..bc8f7a5
--- /dev/null
+++ b/webpack-config/webpack.config.js
@@ -0,0 +1,5 @@
+const { config } = require( '@wordpress/webpack-config' );
+
+module.exports = Object.assign( {}, config, {
+	// apply your changes here
+} );
\ No newline at end of file