title: Webpack long term caching
body: <h1>Scenario</h1>
  
  <p>I'm attempting to use webpack to bundle my vendor scripts separately from my application scripts.</p>
  
  <h2>Attempt 1</h2>
  
  <p><em>index.js</em></p>
  
  <pre><code>var _ = require('lodash');
  console.log(_)
  </code></pre>
  
  <p><em>webpack.config.js</em></p>
  
  <pre><code>var path = require('path');
  var webpack = require('webpack');
  var HtmlWebpackPlugin = require('html-webpack-plugin');
  
  var config = {
    entry: {
      vendor: ['lodash'],
      app: './index.js'
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: '[name].[chunkhash].js'
    },
    plugins: [
  
      new webpack.optimize.CommonsChunkPlugin({
        name: "vendor",
        minChunks: Infinity,
      }),
  
      new HtmlWebpackPlugin({
          filename: 'index.html',
          inject: true
      })
    ]
  };
  
  module.exports = config;
  </code></pre>
  
  <p><em>results</em></p>
  
  <blockquote>
  <pre><code>                         Asset       Size  Chunks             Chunk Names
         app.3437c5da57e0c6671675.js  145 bytes       0  [emitted]  app
      vendor.72c95e21a8d7096d53bc.js     428 kB       1  [emitted]  vendor
                          index.html  232 bytes          [emitted]
  </code></pre>
  </blockquote>
  
  <p>Now if I make a change to <code>index.js</code></p>
  
  <p><em>index.js</em></p>
  
  <pre><code>var _ = require('lodash');
  console.log('changed index');
  console.log(_)
  </code></pre>
  
  <p><em>results</em></p>
  
  <blockquote>
  <pre><code>                Asset       Size  Chunks             Chunk Names
     app.c724350371b50a9afeb2.js  177 bytes       0  [emitted]  app
  vendor.0e76f9c86cbe02606265.js     428 kB       1  [emitted]  vendor
                      index.html  232 bytes          [emitted]
  </code></pre>
  </blockquote>
  
  <p>Both hashes change even though I only updated the index file.</p>
  
  <p>The difference between the two vendor files is</p>
  
  <p><em>vendor.72c95e21a8d7096d53bc.js</em></p>
  
  <p><code>script.src = __webpack_require__.p + "" + chunkId + "." + ({"0":"app"}[chunkId]||chunkId) + "." + {"0":"3437c5da57e0c6671675"}[chunkId] + ".js";</code></p>
  
  <p><em>vendor.0e76f9c86cbe02606265.js</em></p>
  
  <p><code>script.src = __webpack_require__.p + "" + chunkId + "." + ({"0":"app"}[chunkId]||chunkId) + "." + {"0":"c724350371b50a9afeb2"}[chunkId] + ".js";</code></p>
  
  <h2>Attempt 2</h2>
  
  <p>After doing some research I found the article below which explains that webpack generates a chuck manifest that contains the chunk identifiers which is placed in the entry chunk. This explains the diff above. The solution is to extract the chuck manifest to a seperate file.</p>
  
  <p><a href="https://medium.com/@okonetchnikov/long-term-caching-of-static-assets-with-webpack-1ecb139adb95">https://medium.com/@okonetchnikov/long-term-caching-of-static-assets-with-webpack-1ecb139adb95</a></p>
  
  <p><em>index.js</em></p>
  
  <pre><code>var _ = require('lodash');
  console.log(_)
  </code></pre>
  
  <p><em>webpack.config.js</em></p>
  
  <pre><code>var path = require('path');
  var webpack = require('webpack');
  var HtmlWebpackPlugin = require('html-webpack-plugin');
  var ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');
  
  var config = {
    entry: {
      vendor: ['lodash'],
      app: './index.js'
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: '[name].[chunkhash].js'
    },
    plugins: [
  
      new webpack.optimize.CommonsChunkPlugin({
        name: "vendor",
        minChunks: Infinity,
      }),
  
      new ChunkManifestPlugin({
        filename: "manifest.json",
        manifestVariable: "webpackManifest"
      }),
  
      new HtmlWebpackPlugin({
          filename: 'index.html',
          inject: true
      })
    ]
  };
  
  module.exports = config;
  </code></pre>
  
  <p><em>results</em></p>
  
  <blockquote>
  <pre><code>               Asset       Size  Chunks             Chunk Names
  app.3437c5da57e0c6671675.js  145 bytes       0  [emitted]  app
               manifest.json   35 bytes          [emitted]
  vendor.72c95e21a8d7096d53bc.js     428 kB       1  [emitted]  vendor
  </code></pre>
  </blockquote>
  
  <p>Now if I make a change to <code>index.js</code></p>
  
  <p><em>index.js</em></p>
  
  <pre><code>var _ = require('lodash');
  console.log('changed index');
  console.log(_)
  </code></pre>
  
  <p><em>results</em></p>
  
  <blockquote>
  <pre><code>               Asset       Size  Chunks             Chunk Names
  app.c724350371b50a9afeb2.js  177 bytes       0  [emitted]  app
               manifest.json   35 bytes          [emitted]
  vendor.0e76f9c86cbe02606265.js     428 kB       1  [emitted]  vendor
  </code></pre>
  </blockquote>
  
  <p>Once again both hashes change even though I only updated the index file.</p>
  
  <p>This time however, there are no differences between the two vendor files</p>
  
  <h2>Questions</h2>
  
  <p>Is there a reason why the above scenario is not working or am I fundamentally approaching this problem incorrectly. </p>
  
  <p>Is there is an easier way with webpack to achieve what I'm trying to do, because even if I get the step above working, I'll have to read the manifest and then inject it into my index.html page?</p>