Webpack multiple chunks include same dependency - webpack-4

Question

I want to have some dependencies in different chunks so client.js would be smaller. webpack 4.16.5
Why I get same code included to several chunks? What's missing?
const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
mode: 'production',
target: 'web',
// devtool: 'source-map',
entry: {
echarts: ['echarts'],
vendor_1: ['react', 'immutable', 'lodash', 'redux', 'redux-saga'],
vendor_2: ['#material-ui/core', '#tinymce/tinymce-react'],
client: ['babel-polyfill', path.join(__dirname, 'app/index.js')],
},
output: {
path: path.join(__dirname, '/dist/'),
filename: '[hash].[name].js',
publicPath: './',
},
resolve: {
modules: [
path.join(__dirname, '/app'),
'node_modules',
],
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
template: 'app/index.tpl.html',
inject: 'body',
filename: 'index.html',
}),
new BundleAnalyzerPlugin(),
],
module: {
rules: [
{
test: /\.js?$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
}],
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader?modules&localIdentName=[name]---[local]---[hash:base64:5]',
'sass-loader',
],
},
{
test: /\.woff(2)?(\?[a-z0-9#=&.]+)?$/,
use: [{
loader: 'url?limit=10000&mimetype=application/font-woff',
}],
},
{
test: /\.(ttf|eot|svg)(\?[a-z0-9#=&.]+)?$/,
use: [{
loader: 'file',
}],
},
],
},
};

Answer 1

I added optimization config and it works now as expected.
optimization: {
splitChunks: {
chunks: 'initial',
},
},
I've played with values a bit and this was the best result for my code base without any extra code edits. You can find all possible options here:
https://webpack.js.org/configuration/optimization/
Thanks Pavel for the tip ;)