How to config my webpack.config.js to extract these dependances?

107 views Asked by At

the construct of the object

I want to extract 'vue' to a chunk, 'jquery' to a chunk and something relating with 'vue',like 'vuex', 'vue-router' to another chunk. and what should do with CommonChunkPlugin?

These codes were my config, It conbine the vue and the jquery with others

new webpack.optimize.CommonsChunkPlugin(
  name: 'vendor',
  minChunks: function(module, count) {
    return (
      module.resource &&
      /\.js$/.test(module.resource) && 
      module.resource.indexOf( path.join(__dirname, '../node_modules') ) === 0
    )
  }
}),
new webpack.optimize.CommonsChunkPlugin({
  name: 'manifest',
  chunks: ['vendor']
})

entry: {
  collegedaily: '.src/collegedaily/collegedaily.js',
  editor: './src/editor/editor.js',
  sharepage: './src/share/blog.js',
  agreement: './src/agreement/agreement.js',
  invitationCode: './src/invitationCode/invitationCode.js'
}

thank you very much!

1

There are 1 answers

1
Ematipico On

You can create two new instances of CommonsChunkPlugin and make them like this

new webpack.optimize.CommonsChunkPlugin({
   name: 'vue',
   minChunks: function(module, count) {
     return  module.resource && (/vue/).test(module.resource)    
   }
}),
new webpack.optimize.CommonsChunkPlugin({
   name: 'jquery',
   minChunks: function(module, count) {
     return  module.resource && (/jquery/).test(module.resource)    
   }
}),