title: Webpack - Merging splitted bundles
body: <p>I have one big bundled JS file which contains scripts that can run at the end of page loading. </p>
  
  <p>In other words - I wanted to reduce the size of the first downloaded JS file by multiple entry points</p>
  
  <p>So I've created two entry points : </p>
  
  <pre><code>module.exports = {
      entry: {
          a: "./scripts/entry.js",
          b: "./scripts/windowEvents.js"
      },
      plugins: [
          new webpack.optimize.CommonsChunkPlugin("common.js")
      ],
  
  
      output: {
          path: path.join(__dirname, '/scripts/bundle'),
          filename: "[name].entry.js"
      },
  
      module: {
          loaders: [
          ]
      }
  };
  </code></pre>
  
  <p>So now I have :</p>
  
  <ul>
  <li>a.entry.js</li>
  <li>b.entry.js</li>
  <li>common.js.entry.js</li>
  </ul>
  
  <p>And my HTML file looks like : </p>
  
  <pre><code> &lt;script src="/scripts/bundle/common.js.entry.js"&gt;&lt;/script&gt; 
   &lt;script src="/scripts/bundle/a.entry.js"&gt;&lt;/script&gt; 
  
   //Html  renders fast
  
   //bottom page script
   &lt;script src="/scripts/bundle/b.entry.js"&gt;&lt;/script&gt; 
  </code></pre>
  
  <p>But here is the problem  :</p>
  
  <p>The first two scripts sections makes 2 requests to the server. I don't want that</p>
  
  <p><strong>Question:</strong></p>
  
  <p>How can I merge the first two bundles into one bundle there will be only one request ? In other words I want to merge  <code>a.entry.js</code> &amp; <code>common.js</code>.</p>
  
  <p>Something like that  :</p>
  
  <pre><code> &lt;script src="/scripts/bundle/Common_AND_Entry_a.js"&gt;&lt;/script&gt; 
  
   //Html  renders fast
  
   //bottom page script
   &lt;script src="/scripts/bundle/b.entry.js"&gt;&lt;/script&gt; 
  </code></pre>