title: Uncaught ReferenceError: $ is not defined after bundling with webpack
body: <p>I have this error on frontend:</p>
  
  <blockquote>
    <p>Uncaught ReferenceError: $ is not defined</p>
  </blockquote>
  
  <p>This is after I have tried bundling all js files (including jQuery) in a folder into 1 file with:</p>
  
  <pre><code>var glob = require("glob");
  
  module.exports = {
      entry: {
          bundle:  glob.sync("./src/js/*.js")
      },
      output: {
          filename: "[name].js",
          path: path.resolve(__dirname, "dist/js")
      },
  </code></pre>
  
  <p>There is no error when building.  </p>
  
  <p>Does bundling jQuery need some sort of unique approach?  </p>
  
  <p>Or if this relates to the "order" of the files bundled, I thought webpack was able to overcome this by design?</p>
  
  <p><strong>Edit:</strong>  </p>
  
  <p>I abandoned this approach of using <code>glob</code>, instead opting to go for a single entry file that has import statements for third party js libraries and jQuery plugins, eg:</p>
  
  <p><strong>entry_file.js:</strong></p>
  
  <pre><code>import hljs from './highlight';
  
  import $ from './jquery';
  </code></pre>
  
  <p><strong>webpack.config.js:</strong></p>
  
  <pre><code>module.exports = {
      entry: "./src/js/entry_file.js",
      output: {
          filename: "bundle.js",
          path: path.resolve(__dirname, "dist/js")
      },
  </code></pre>
  
  <p>This new approach is not without its own headaches, however, as some plugins/libraries have their own idiosyncrasies and throw errors like <code>Uncaught ReferenceError: jQuery is not defined</code> etc.  </p>