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

Question

В моей 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' 
    ], 

Answer 1

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

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'] 
    }) 
] 

Если вам нужно, у меня есть repo with a working example of this. Часть CommonsChunk находится в конфигурации prod.