title: Webpack configuration vs multiple bundles and ordering
body: <p>I have a big javascript (angularjs) application which I have bootstrapped in a Angular 8 project. Now I also have many vendor libraries that are javascript files. For example Kendo libs, JQuery, foundation (zurb). </p>
  
  <p>I have these vendor files, and my app files included in my webpack configuration. Which looks like this:</p>
  
  <pre><code>var HtmlWebpackPlugin = require('html-webpack-plugin');
  module.exports = {
    mode: 'development',
    entry: {
      'ang': './chunks/angularjs.ts',
      'fou': './chunks/foundation.ts',
      'ken': './chunks/kendo.ts',
      'vws': './chunks/views.ts',
      'dir': './chunks/directives.ts',
      'ser': './chunks/services.ts',
      'con': './chunks/controllers.ts',
      'app': './main.ts',
      'toastr': './app-old/scripts/toastr.js'
    },
    output: {
      path: helpers.root('dist/dev'),
      publicPath: '/',
      filename: '[name].bundle.js'
    },
    // Currently we need to add '.ts' to the resolve.extensions array.
    resolve: {
      extensions: ['.ts', '.tsx', '.js', '.jsx']
    },
    // Add the loader for .ts files.
    module: {
      rules: [
        {
          test: /\.ts$/,
          loaders: ['awesome-typescript-loader', 'angular2-template-loader?keepUrl=true'],
          exclude: [/\.(spec|e2e)\.ts$/]
        },
        {
          test: /\.less$/,
          loader: 'less-loader', // compiles Less to CSS
        },
        {
          test: /\.css$/,
          loader: "style-loader!css-loader"
        },
        {
          test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|tff|otf|eot|ico)$/,
          loader: 'file-loader?name=assets/[name].[hash].[ext]'
        },
        {
          test: /\.html$/,
          loader: 'html-loader'
        },
        {
          // Exposes jQuery for use outside Webpack build
          test: require.resolve(path.resolve(__dirname, './app-old/scripts/jquery-2.1.4.js')),
          use: [{
            loader: 'expose-loader',
            options: 'jQuery'
          }, {
            loader: 'expose-loader',
            options: '$'
          }]
        }
      ]
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: '../config/index.html'
      }),
      // new webpack.ProvidePlugin({
      //   foundation: 'foundation-sites/js/foundation/foundation'
      // }),
      new webpack.ProvidePlugin({
        $: path.resolve(__dirname, './app-old/scripts/jquery-2.1.4.js'),
        jQuery: path.resolve(__dirname, './app-old/scripts/jquery-2.1.4.js'),
        "window.jQuery": path.resolve(__dirname, './app-old/scripts/jquery-2.1.4.js')
      }),
      new webpack.ProvidePlugin({
        toastr: 'toastr',
        "window.toastr": "toastr"
      })
    ]
  }
  </code></pre>
  
  <p>You see that I have created different entry points, because I want smaller chunks (because of performance).</p>
  
  <p>It compiles perfectly, but when I start up the application the troubles begin. I get al kinds of erros. It keeps telling my that JQuery needs to be loaded before Kendo is being loaded. And the foundation files need don't see the JQuery files.
  But I made sure that they are globally available, as you can see in the file.</p>
  
  <p>Not the strange thing.
  When I throw everything in 1 TS file and use just only 1 entry point everything runs ok and I have no errors. :-) 
  But then my bundled file is huge and this is not good for the performance. </p>
  
  <p>So my main question is?
  How can I get multiple chunks for my vendor javascript files so that they can see each other?</p>
  
  <p>I am starting to think that I don't need to use the entry points for smaller chunks.</p>