Я раніше не бачив цього синтаксису і мені цікаво, що це таке.

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(){} }.

І якщо ми хотіли б взяти один ключ у тому поверненому об'єкті, скажімо, Navigationдо змінної, ми можемо використовувати для цього об’єкт, що руйнує .

Це стане можливим лише за умови використання ключа.

Отже, після заяви про призначення, локальна змінна Navigationміститимеfunction a(){}

Інший приклад виглядає приблизно так.

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