Webpack 4 и code splitting
25 февраля 2018 года вышел релиз webpack 4.0.0 (и на сегодняшний день 4.0.1). Одна из полезных и сравнительно новых фич webpack — code splitting, перенесена в новой версии из плагинов в основную конфигурацию. При практически полном отсутствии документации, как теперь нужно конфигурировать code splitting в версии 4 — я немного испытал шок, но все же попытался собрать информацию, чтобы по минимуму начать работать с новой версией. Я надеюсь, что через некоторое время появятся и обстоятельные tutorials, и статьи. Пока же спешу сделать заметки по найденной информации, чтобы не потерять ее на просторах интернета.
В webpack версии 3 code splitting конфигурировался в параметрах плагина:
new CommonsChunkPlugin({
name: 'common',
minChunks: 2,
}),
Сейчас в конфигурацию добавлена новая секция — оптимизация. Один из вариантов конфигурации, который имеет аналогичный функционал выглядит так:
optimization: {
minimize: false,
runtimeChunk: { name: 'common' },
splitChunks: {
cacheGroups: {
default: false,
commons: {
test: /\.jsx?$/,
chunks: 'all',
minChunks: 2,
name: 'common',
enforce: true,
},
},
},
},
К сожалению не все параметры в настоящее время документированы и многое остается неясным.