私はこれまでにこの構文を見たことがなく、それが何なのか疑問に思っています。

var { Navigation } = require('react-router');

左側の括弧は構文エラーを投げています：

予期しないトークン{

webpack設定のどの部分が変換されているのか、構文の目的が何かはわかりません。ハーモニーなの？誰かが私を啓発できますか？

これは、破壊的割り当てと呼ばれ、ES2015標準の一部です。

破壊代入構文は、配列およびオブジェクトリテラルの構造を反映する構文を使用して配列またはオブジェクトからデータを抽出できるようにするJavaScript式です。

出典： MDNの割り当て参照の破棄

オブジェクトの破壊

 var o = {p: 42, q: true};
 var {p, q} = o;

 console.log(p); // 42
 console.log(q); // true 

 // Assign new variable names
 var {p: foo, q: bar} = o;

 console.log(foo); // 42
 console.log(bar); // true

配列の破壊

var foo = ["one", "two", "three"];

// without destructuring
var one   = foo[0];
var two   = foo[1];
var three = foo[2];

// with destructuring
var [one, two, three] = foo;

これは破壊的な割り当てです。これはECMAScript 2015の新機能です。

var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

以下と同等です。

var AppRegistry = React.AppRegistry;
var StyleSheet = React.StyleSheet;
var Text = React.Text;
var View = React.View;

var { Navigation } = require('react-router');

...と同じことを達成するために構造化を使用します...

var Navigation = require('react-router').Navigation;

...しかし、はるかに読みやすいです。

これは、オブジェクトを分解するためのES6の新機能です。

ここでは代入演算が行われていることを知っているので、右側の値が左側の変数に代入されます。

var { Navigation } = require('react-router');

この場合、require('react-router')メソッドは次のようなキーと値のペアを持つオブジェクトを返します

{ Navigation: function a(){}, Example1: function b(){}, Example2: function c(){} }。

そして、返されたオブジェクトの1つのキーをNavigation変数に伝えたい場合は、Object Destructingを使用できます。

これは、鍵を手元に持っている場合にのみ可能です。

したがって、代入ステートメントの後、ローカル変数Navigationにはfunction a(){}

別の例は次のようになります。

var { p, q } = { p: 1, q:2, r:3, s:4 };
console.log(p) //1;
console.log(q) //2;