title: Webpack bundle - Bootstrap's JavaScript requires jQuery
body: <p>I am trying to achieve the following:</p>
  
  <ul>
  <li><code>bundle</code> (<strong>in this order</strong>) <code>jquery</code>, <code>tether</code>, and <code>bootstrap.js</code>.</li>
  <li>load this bundle within a <code>HTML</code>page and beneath it load other page specific scripts.</li>
  </ul>
  
  <p>To achieve this I am using <code>webpack 2</code> and the <code>CommonsChunkPlugin</code>. Here is my config.</p>
  
  <p>For <code>entries</code> I have:</p>
  
  <pre><code>const scriptsEntry = {
      blog_index: SRC_DIR + "/js/pages/blog_index.js",
      blog_about: SRC_DIR + "/js/pages/blog_about.js",
      vendor: ["jquery", "tether", "bootstrap"]
  };
  </code></pre>
  
  <p>In the <code>plugins</code> section:</p>
  
  <pre><code>scriptsPlugins.push(
      new webpack.optimize.CommonsChunkPlugin({
          name: "vendor", 
          filename:"vendor.bundle.js", 
          minChunks: 2
      }),
      ...
  }));
  </code></pre>
  
  <p>Inside 'index.html' I load the bundles:</p>
  
  <pre><code>&lt;script src="{{ url_for('static', filename='dist/js/vendor.bundle.js') + anti_cache_token }}"&gt;&lt;/script&gt;
  &lt;script src="{{ url_for('static', filename='dist/js/home.js') + anti_cache_token }}"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Inside the source directory in the <code>blog_index.js</code> I make use of <code>jquery</code>:</p>
  
  <pre><code>import $ from "jquery";
  
  $(".home-click").click(function () {
      alert("clicked from .home-click");
  });
  </code></pre>
  
  <p><strong>The result:</strong></p>
  
  <ul>
  <li>everything bundles without any errors.</li>
  <li>when I click <code>.home-click</code> the <code>alert box</code> fires as expected.</li>
  <li>checking the bundled files I see that:
  
  <ul>
  <li><code>vendor.bundle.js</code> contains: <code>jquery</code>, <code>tether</code>, and <code>bootstrap</code>.</li>
  <li>looking inside, for instance, <code>blog_index.js</code> (after it was run through <code>webpack 2</code>), I notice that the <code>jquery</code> import is not bundled inside this file, but <code>vendor.bundle.js</code> (this is as expected).</li>
  </ul></li>
  </ul>
  
  <p>However, I have the following <strong>problem</strong> when I check the browser console:
  <a href="https://i.stack.imgur.com/M6elU.png" rel="noreferrer"><img src="https://i.stack.imgur.com/M6elU.png" alt="enter image description here"></a></p>
  
  <p>I tried switching the order of the libraries in this line <code>vendor: ["jquery", "tether", "bootstrap"]</code>, but nothing changed--the error is still there.</p>
  
  <p>Do you know how can I solve this, preferably without using additional <code>webpack</code> plugins?</p>