webpack CommonsChunkPlugin和code-splitting，chunkhash共用导致缓存失效的问题？

Question

1. vue全家桶webpack工程中，我使用了CommonsChunkPlugin，chunkhash做文件静态缓存。 vendor.js 文件是vue，vuex，vue-router，element-ui 第三方库。

   entry: {
          vendor: './src/vendor/vendor.js',
          main: './src/main.js',
   },
   output: {
          path:   resolve(__dirname, '../resources/static/build') ,
          publicPath: '/build/' ,
          filename:'[name].[chunkhash].js'
   },
   plugins: [
      new webpack.optimize.CommonsChunkPlugin({
          name: "vendor",
          filename: "vendor.js",
          minChunks: Infinity,
          chunks: [ "main"],  // 只在 main 的 entry 中使用到 commonChunk
      })
   ]

2. vue路由做了代码分割，按需加载

   const Index = resolve => require(['../page/statistics/Index.vue'], resolve),
         NetTopData = resolve => require(['../page/statistics/Index.vue'], resolve),
         Dashboard = resolve => require(['../page/dashboard/Index.vue'], resolve);
         ...

3. 生成的路由文件是这样，文件名+hash.js。没问题。
   
   
4. 问题在于打包生成的vendor.js文件有这么一段代码：
   
   

没错，vendor文件存放着代码分割后的小文件名，问题在于

• 如果重新打包之后，旧文件会被清除，修改的文件的hash值改变，vendor中的分割的路由组件名也会改变，用户浏览器中还缓存着vendor的老文件，根据老的vendor文件来按需加载路由组件，就会找不到原来的路由组件。报错，需要用户清除缓存，重新加载新的 vendor.js 文件，才能访问到更改过的路由组件。
• CommonsChunkPlugin的本意不是抽离第三方组件，所有路由组件通用，不需重复加载么？为什么同时使用 CommonsChunkPlugin和code-splitting，chunkhash，会每次打包vendor内容都会改变？

想要的效果：
每次打包生成的vendor.js保持不变，修改过的路由组件hash值变化，用户每次访问最新的代码。

PS: 问题描述可能不是很详细，有什么需要我补充请随便提出来，谢谢。

Answer 1

你理解错CommonsChunkPlugin的意思了，它是把所有文件里公用的代码提取出来到一个文件里，并不是把vue，vuex，vue-router，element-ui合并成一个文件。
你自己也看到了vendor.js里面索引对应的是每个路由文件的名称。

如果你想把某些组件剥离出来，建议你去看看webpack的DLL