title: Webpack does not import bundles from node_modules (js only)
body: <p>Good Morning, </p>
  
  <p>I'm quite new to Webpack and feel a bit lost - importing modules from the source path works just fine - but importing modules from node_modules (e.g. jQuery) gives me error messages that the module is not found. I am completely lost and don't even know what to look for or how to debug this further. </p>
  
  <p>The error message i am getting is: </p>
  
  <pre><code>external "jquery":1 Uncaught ReferenceError: jquery is not defined
      at Object.jquery (external "jquery":1)
      at __webpack_require__ (bootstrap:723)
      at fn (bootstrap:100)
      at Object../js/ManagementApplication.ts (ManagementApplication.ts:5)
      at __webpack_require__ (bootstrap:723)
      at fn (bootstrap:100)
      at Object.0 (dist.js:40457)
      at __webpack_require__ (bootstrap:723)
      at bootstrap:790
      at bootstrap:790
  jquery @ external "jquery":1
  __webpack_require__ @ bootstrap:723
  fn @ bootstrap:100
  ./js/ManagementApplication.ts @ ManagementApplication.ts:5
  __webpack_require__ @ bootstrap:723
  fn @ bootstrap:100
  0 @ dist.js:40457
  __webpack_require__ @ bootstrap:723
  (anonymous) @ bootstrap:790
  (anonymous) @ bootstrap:790
  </code></pre>
  
  <p>and here is my webpack config: </p>
  
  <pre><code>// shared config (dev and prod)
  const {resolve} = require('path');
  const {CheckerPlugin} = require('awesome-typescript-loader');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const webpack = require("webpack")
  
  
  module.exports = {
      resolve: {
          extensions: ['.ts', '.js'],
      },
      context: resolve(__dirname, '../src/main/'),
      output: {
          filename: "dist.js",
          path: resolve(__dirname, '../target')
      },
      externals: {
          bootstrap: "bootstrap",
          jquery: "jquery"
      },
      module: {
          rules: [
              {
                  test: /\.js$/,
                  use: ['babel-loader'],
              },
              {
                  test: /\.tsx?$/,
                  use: ['babel-loader', 'awesome-typescript-loader'],
              },
              {
                  test: /\.css$/,
                  use: ['style-loader', {loader: 'css-loader', options: {importLoaders: 1}}],
              },
              {
                  test: /\.(scss)$/,
                  use: [{
                      loader: 'style-loader', // inject CSS to page
                  }, {
                      loader: 'css-loader', // translates CSS into CommonJS modules
                  }, {
                      loader: 'postcss-loader', // Run postcss actions
                      options: {
                          plugins: function () { // postcss plugins, can be exported to postcss.config.js
                              return [
                                  require('autoprefixer')
                              ];
                          }
                      }
                  }, {
                      loader: 'sass-loader' // compiles Sass to CSS
                  }]
              },
  
              {
                  test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                  use: 'url-loader?limit=10000',
              },
              {
                  test: /\.hbs/,
                  loaders: "handlebars-loader"
              },
              {
                  test: /\.(jpe?g|png|gif|svg)$/i,
                  loaders: [
                      'file-loader?hash=sha512&amp;digest=hex&amp;name=img/[hash].[ext]',
                      'image-webpack-loader?bypassOnDebug&amp;optipng.optimizationLevel=7&amp;gifsicle.interlaced=false',
                  ],
              },
          ],
      },
      plugins: [
          new CheckerPlugin(),
          new HtmlWebpackPlugin(),
          new webpack.IgnorePlugin(/\/iconv-loader$/)
      ],
      performance: {
          hints: false,
      },
  };
  </code></pre>
  
  <p>and this one: </p>
  
  <pre><code>// development config
  const merge = require('webpack-merge');
  const webpack = require('webpack');
  const commonConfig = require('./common');
  
  module.exports = merge(commonConfig, {
      mode: 'development',
      entry: [
          'webpack-dev-server/client?http://localhost:4000',// bundle the client for webpack-dev-server and connect to the provided endpoint
          'webpack/hot/only-dev-server', // bundle the client for hot reloading, only- means to only hot reload for successful updates
          './js/ManagementApplication.ts' // the entry point of our app
      ],
  
      devServer: {
          hot: true,
          host: "0.0.0.0",
          port: "4000"
  
      },
      devtool: 'source-map',
      plugins: [
          new webpack.HotModuleReplacementPlugin(), // enable HMR globally
          new webpack.NamedModulesPlugin(), // prints more readable module names in the browser console on HMR updates
      ],
  });
  </code></pre>
  
  <p>(both of them are loaded, the latter one overriding the first one). </p>
  
  <p>I've checked a billion times that the libraries are correctly inside node_modules - just don't know why they are not loaded. This problem is not specific only to a specific library but genreally to all libraries. </p>
  
  <p>Importing css resources from libraries works fine in contrast. </p>
  
  <p>Does anyone have an idea how to fix this or can help me understanding what is happening? </p>