How to separate webpack code from project code?

Question

JavaScript

What is the best way to separate the webpack code from the project code so that we end up with 2 files.
With the help of CommonsChunkPlugin, only repeating code is taken out to common (
upd.
I probably didn’t formulate the question correctly, I meant project dependencies, for example react, react-router, redux and others. since the stack does not change so often, and the project code is actively developed, I I would like to separate the project code and put the dependency code into a separate js file (common.js) and in bundle.js so that there would be only the project code, and when changed, so that the browser does not tuck all the code together with the dependencies again, but caches them.

Answer 1

You set as many elements in entry as you need. Then in the output you set filename with the substitution of the name of the desired entry. Entry with all dependencies is added to CommonsChunkPlugin so that they are not duplicated in the entry of the application source. Something like that:

entry: {
  app: './src/app.js',
  vendor: ['lib1', 'lib2', ... ] // перечисляем тут все зависимости, которые нужно вынести в отдельный файл
},
output: {
  filename: '[name].js?[chunkhash:6]' // получаем 2 файла: app.js, vendor.js
},
plugins: [
  new webpack.optimize.CommonsChunkPlugin({ // убираем дубли зависимостей из app.js
    names: ['vendor']
  }
]

Well, then, if necessary, shake the entry and CommonsChunkPlugin configs, everything about them is described in detail in the webpack documentation.