How to move a library to vendor bundle in webpack 2.0

Question

In a project which I have acquired, I have a main.js file which is shared across the website that's why they have included external dependency bootstrap.js in it.

main.js

window.jQuery = window.$ = require('jquery');

$(document).ready(function () {
    require('./components/menu')();
    //other components
});

require('./thirdparty/bootstrap');
require('./components/spinner');

./thirdparty/bootstrap

// import '../../../../../../../node_modules/bootstrap/js/src/alert';
// import '../../../../../../../node_modules/bootstrap/js/src/button';
import '../../../../../../../node_modules/bootstrap/js/src/carousel';
import '../../../../../../../node_modules/bootstrap/js/src/collapse';
// import '../../../../../../../node_modules/bootstrap/js/src/dropdown';
import '../../../../../../../node_modules/bootstrap/js/src/modal';
// import '../../../../../../../node_modules/bootstrap/js/src/popover';
import '../../../../../../../node_modules/bootstrap/js/src/scrollspy';
import '../../../../../../../node_modules/bootstrap/js/src/tab';
// import '../../../../../../../node_modules/bootstrap/js/src/tooltip';

I am trying to setup webpack with this project & want to move this vendor dependency i.e bootstrap into a separate chunk as it will not change frequently. So, I added a new 'vendor' entry like below

module.exports = [{
    name: 'js',
    entry: {
        main : './src/main.js',
        vendor : ['jquery', 'bootstrap']
        //other entries
    },
    output: {
        path: './dist',
        filename: '[name].js'
    },
    module: {
        loaders: [ /*loaders like babel */ ]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: Infinity,
            filename: '[name].[chunkhash].js'
        }),
    ]
}];

When I run the webpack build the build is generated fine & my project works but I have bootstrap copied in 2 different chunks i.e in main.js & vendor.js.

I think by declaring bootstrap in vendor, webpack picked the bootstrap node_modules and included it in vendor.js.

Now, my required webpack output is, only moving the bootstrap components which are present in ./thirdparty/bootstrap js file to vendor chunk.

Is it possible to do that?

Answer 1

I solved it by specifying the exact dependencies I want in my vendor.

['jquery', './node_modules/bootstrap/js/src/carousel.js',
'./node_modules/bootstrap/js/src/collapse.js', './node_modules/bootstrap/js/src/modal.js',
'./node_modules/bootstrap/js/src/scrollspy.js', './node_modules/bootstrap/js/src/tab.js'
];

After specifying the exact bootstrap js I require my duplicity issue is solved.