I am aiming to generate a vendor.bundle.js file using my modules.
I have set up webpack as follows:
...
entry: {
app: ['./src/index.js'],
vendor: [
'axios',
'lodash',
'recharts',
'moment',
......
'react-select',
'react-tooltip',
'react-toggle',
'buffer',
'jstz',
'pikaday',
'qrcode-js',
'notie',
'tippy.js',
'react-dropzone',
'react-dd-menu',
'html-to-draftjs',
'react-virtualized',
'react-draft-wysiwyg',
'js-search',
'qr.js'
]
},
...
output: {
path: '/Users/ben/pro/qbpanel2.0/qbpanel-2.0/qbpanel/app/assets/javascripts',
publicPath: '/',
filename: 'bundle.js'
},
...
plugins: [
new BundleAnalyzerPlugin({
analyzerPort: 9998
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'vendor.bundle.js',
path: '/Users/ben/pro/qbpanel2.0/qbpanel-2.0/qbpanel/app/assets/javascripts',
publicPath: '/',
minChunks: Infinity
}),
...
]
}
I anticipate that all the packages mentioned in entry.vendor will be included in the final vendor.bundle.js file, however, some of them are present in both the bundle.js and vendor.bundle.js.
Why is this happening?
In the bundle.js, I did not expect to find tippy.js, react-virtualized, or lodash.
https://i.sstatic.net/YHTZw.png
In the vendor.bundle.js, there are duplicate entries from the bundle.js, which should only be here.
https://i.sstatic.net/o9gUx.png