WP: Minimum webpack Config for WordPress Block Plugin with JSX

.babelrc

{
	"presets": [
		[ "env", {
			"modules": false,
			"targets": {
				"browsers": [
					"last 2 Chrome versions",
					"last 2 Firefox versions",
					"last 2 Safari versions",
					"last 2 iOS versions",
					"last 1 Android version",
					"last 1 ChromeAndroid version",
					"ie 11"
				]
			}
		} ]
	],
	"plugins": [
		[ "transform-react-jsx", {
			"pragma": "wp.element.createElement"
		} ]
	]
}

package.json

{
  "name": "wp-block",
  "version": "1.0.0",
  "main": "block.js",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "babel-preset-env": "^1.6.1",
    "cross-env": "^5.1.3",
    "webpack": "^3.11.0"
  },
  "scripts": {
    "build": "cross-env BABEL_ENV=default NODE_ENV=production webpack",
    "dev": "cross-env BABEL_ENV=default webpack --watch"
  }
}

webpack.config.js

/**
 * Minimum webpack Config for WordPress Block Plugin
 *
 * webpack basics — If you are new the webpack here's all you need to know:
 *     1. webpack is a module bundler. It bundles different JS modules together.
 *     2. webpack needs and entry point and an ouput to process file(s) and bundle them.
 *     3. By default webpack only understands JavaScript but Loaders enable webpack to
 *        process more than just JavaScript files.
 *     4. In the file below you will find an entry point, an ouput, and a babel-loader
 *        that tests all .js files excluding the ones in node_modules to process the
 *        modern JavaScript and make it compatible with older browsers i.e. it converts the
 *        code written witten with modern JavaScript (new standards of JavaScript) into old
 *        JavaScript through a Babel loader.
 *
 * @link webpack https://webpack.js.org/
 * @link webpack concepts https://webpack.js.org/concepts/
 * @author Ahmad Awais https://github.com/ahmadawais
 * @since 1.0.0
 */

module.exports = {
	// Entry.
	entry: './block.js', // Import all JavaScript dependencies in this file.

	// Output.
	output: {
		path: __dirname, // Path to produce the output. Set to the current directory.
		filename: 'block.build.js', // Filename of the file that webpack builds.
	},

	// Loaders.
	// The configuration below has defined a rules property for a single module with
	// two required properties: test and use. This tells webpack's compiler the following:
	// "Hey webpack compiler, when you come across a '.js' or '.jsx' file inside of a
	// require()/import statement, use the babel-loader to transform it before you add
	// it to the bundle."
	module: {
		rules: [
			{
				test: /\.(js|jsx)$/, // Identifies which file or files should be transformed.
				use: { loader: 'babel-loader' }, // Babel loader to transpile modern JavaScript.
				exclude: /(node_modules|bower_components)/, // JavaScript files to be ignored.
			},
		],
	},
};