name all webpack chunks to improve long term cacheability

1 files changed, 13 insertions, 1 deletions

diff --git a/config/webpack.config.js b/config/webpack.config.js
index c26f3b5063f..2ada74e5a55 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -70,7 +70,8 @@ var config = {
   output: {
     path: path.join(ROOT_PATH, 'public/assets/webpack'),
     publicPath: '/assets/webpack/',
-    filename: IS_PRODUCTION ? '[name].[chunkhash].bundle.js' : '[name].bundle.js'
+    filename: IS_PRODUCTION ? '[name].[chunkhash].bundle.js' : '[name].bundle.js',
+    chunkFilename: IS_PRODUCTION ? '[name].[chunkhash].chunk.js' : '[name].chunk.js',
   },
 
   devtool: 'cheap-module-source-map',
@@ -131,6 +132,17 @@ var config = {
     new webpack.NamedModulesPlugin(),
     new NameAllModulesPlugin(),
 
+    // assign deterministic chunk ids
+    new webpack.NamedChunksPlugin((chunk) => {
+      if (chunk.name) {
+        return chunk.name;
+      }
+      return chunk.modules.map((m) => {
+        var chunkPath = m.request.split('!').pop();
+        return path.relative(m.context, chunkPath);
+      }).join('_');
+    }),
+
     // create cacheable common library bundle for all vue chunks
     new webpack.optimize.CommonsChunkPlugin({
       name: 'common_vue',