Как определить точку входа для webpack CommonsChunkPlugin?

В моей конфигурации webpack у меня есть запись, определенная следующим образом:

entry: [
    'webpack-hot-middleware/client',
    './src/app.jsx'
  ],

Я понял, что размер моего пакета составляет около 8 МБ.

Поэтому я решил разделить файлы javascript поставщика на отдельные куски, т.е. bundle.vendor.js

Я знаю, что для этого мне нужно использовать CommonsChunkPlugin и изменить запись на что-то вроде этого

  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }

Но не могу понять, как изменить мою существующую конфигурацию записи на ту же, которая в настоящее время установлена ​​​​как

entry: [
    'webpack-hot-middleware/client',
    './src/app.jsx'
  ],

webpack javascript vendor commonschunkplugin
person WitVault    schedule 27.12.2016    source источник
comment
commonchunksplugin на самом деле не помогает/не работает в режиме разработки. размер пакета также в основном не имеет значения в режиме разработки. Плохо названный и запутанный dllplugin полезен для извлечения больших ресурсов в отдельный предварительно созданный файл на отдельном этапе предварительной сборки в целях разработки.   -  person Andy Ray    schedule 29.12.2016

Ответы (1)


arrow_upward
1
arrow_downward

<сильный>1. Вам нужно сообщить Webpack о своих точках входа, и в этом случае вы можете определить запись vendors как массив зависимостей. Как это:

entry: {
   app: path.join(__dirname, 'path/to/app.jsx'), // prefer using absolute paths to avoid problems
   vendors: ['jquery', 'lodash']
}

<сильный>2. Вам нужно указать Webpack, какие из ваших записей должны быть оптимизированы: обратите внимание, что вы передаете вторую строку в конфигурации «имена» плагина. Это имя другого файла, который будет создан Webpack. Он будет отвечать за указание браузеру, как правильно обрабатывать зависимости, и будет включен перед вашим приложением и тегами сценариев поставщиков.

plugins : [
   new webpack.optimize.CommonsChunkPlugin({
      names: ['vendors', 'manifest']
   })
]

Если вам нужно, у меня есть репозиторий с рабочим примером этого. Часть CommonsChunk находится в рабочей конфигурации.

person Matheus Dal'Pizzol    schedule 27.12.2016
comment
Куда мне положить это 'webpack-hot-middleware/client' - person WitVault; 27.12.2016
comment
Это другая проблема. Похоже, здесь уже спрашивали: stackoverflow.com/questions/31844343/ - person Matheus Dal'Pizzol; 28.12.2016
comment
Я сделал следующее, и это сработало entry: { app: [ 'webpack-hot-middleware/client', './src/app.jsx' ], vendor:[ 'lodash' ] } В любом случае спасибо за помощь. Вы можете обновить свой ответ, если хотите. - person WitVault; 29.12.2016