title: jQuery not being loaded in Webpack
body: <p>I am in the process of moving my entire <code>application.js</code> application into smaller page bundles using SplitChunks. In my <code>users/show.html.erb</code> page I am using the following tag to import the specific chunk.</p>
  <p><code>&lt;%= javascript_packs_with_chunks_tag 'users/show' %&gt;</code></p>
  <p>From the looks of my source code when I inspect it there are several bundles included such as the <code>application.js</code> file that includes jquery like this...</p>
  <pre><code>import &quot;bootstrap&quot;
  require(&quot;turbolinks&quot;).start()
  require(&quot;@rails/activestorage&quot;).start()
  require(&quot;channels&quot;)
  require(&quot;jquery&quot;)
  </code></pre>
  <p>I am just testing the page to see if jquery is being loaded. My <code>users/show.js</code> code looks like this:</p>
  <pre><code>import &quot;chartkick&quot;
  import &quot;chart.js&quot;
  
  window.onload = function() {
    if (window.jQuery) {  
        // jQuery is loaded  
        alert(&quot;Yeah!&quot;);
    } else {
        // jQuery is not loaded
        alert(&quot;Doesn't Work&quot;);
    }
  }
  </code></pre>
  <p>When I load the page I do see a <code>Doesn't Work</code> alert pop up indicating that jQuery has not been loaded. I'm newer to webpack so perhaps I have some misconfiguration somewhere, but if jquery is being loaded at the application.js level, why would my other pack not be able to listen to use jquery? Is this a problem with the dependency graphs?</p>
  <p>My environment is as follows:</p>
  <pre><code>environment.js
  const { environment } = require('@rails/webpacker');
  const webpack = require('webpack');
  
  environment.plugins.append('Provide', new webpack.ProvidePlugin({
   $: 'jquery',
   jQuery: 'jquery',
   Popper: ['popper.js', 'default']
  }));
  const config = environment.toWebpackConfig();
  config.resolve.alias = {
   jquery: 'jquery/src/jquery'
  };
  
  environment.splitChunks()
  module.exports = environment;
  </code></pre>