Webpack Chunks

webpack.config.js

// ----- Extracting Chunks -----
exports.entry['vendor/vue'] = ['vue', 'vuex', 'vue-resource', 'vue-router']
exports.entry['vendor/bootstrap'] = ['jquery', 'bootstrap', 'tether']
exports.entry['vendor/components'] = ['bootstrap-for-vue']
exports.entry['vendor/plugins'] = ['moment', 'sifter']
exports.entry['vendor/echo'] = ['pusher-js', 'laravel-echo', 'echo-for-vue']
exports.plugins.push(
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest'
    }),

    new webpack.optimize.CommonsChunkPlugin({
      name: 'main',
      children: true,
      minChunks: 4,
    }),

    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor/others',
      chunks: ['main'],
      minChunks (module) {
        return module.context && module.context.indexOf('node_modules') !== -1
      }
    }),

    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor/vue',
      chunks: ['main', 'vendor/bootstrap', 'vendor/components', 'vendor/echo', 'vendor/others'],
      minChunks: Infinity
    }),

    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor/bootstrap',
      chunks: ['main', 'vendor/echo', 'vendor/others', 'vendor/components'],
      minChunks: Infinity
    }),

    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor/components',
      chunks: ['main', 'vendor/echo', 'vendor/others', 'vendor/components'],
      minChunks: Infinity
    }),

    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor/plugins',
      chunks: ['main', 'vendor/bootstrap', 'vendor/components', 'vendor/echo', 'vendor/others'],
      minChunks: Infinity
    }),

    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor/echo',
      chunks: ['main', 'vendor/others'],
      minChunks: Infinity
    })
)