title: Using Webpack with jQuery
body: <p>I want to switch from gulp to webpack but I struggle with jQuery.</p>
  <p><strong>Issue:</strong>
  In Dev-Console on Chrome I alway get the following issue:</p>
  <pre><code>external var &quot;jQuery&quot;:1 Uncaught ReferenceError: jQuery is not defined
  at Object.jquery (external var &quot;jQuery&quot;:1)
  at __webpack_require__ (bootstrap:19)
  at jquery-ui.js:10
  at Object../source/js-ogs/vendor/jquery-plugins/jquery-ui.js (jquery-ui.js:16)
  at __webpack_require__ (bootstrap:19)
  at ogs-vendor.ts:7
  at ogs-vendor.ts:24
  at ogs-vendor.ts:24
  </code></pre>
  <p>If I click on the file it shows me the following line causing the issue:</p>
  <pre><code>module.exports = jQuery;
  </code></pre>
  <p><strong>Project-Structure:</strong>
  I got two files:</p>
  <ul>
  <li>project-vendor.js (linked in head)</li>
  <li>project.js (linked in body)</li>
  </ul>
  <p>project-vendor.js should bundle the following files:</p>
  <pre><code>import '../../js/vendor/jquery-3.3.0'
  import '../../js/vendor/jquery-plugins/jquery-ui'
  import '../../js/vendor/jquery-plugins/isInViewport'
  import '../../js/vendor/jquery-plugins/jquery.selectBox'
  import '../../js/vendor/jquery-plugins/jquery.sumoselect'
  import '../../vendor/polyfills/after-polyfill'
  import '../../vendor/polyfills/polyfill-array-includes'
  import '../../js/vendor/element-closest-polyfill'
  import '../../js/vendor/bootstrap/bootstrap'
  </code></pre>
  <p><strong>Webpack-Config:</strong></p>
  <pre><code>{
    output: {
      path: path.resolve(getPublicPath('path')),
      filename: '[name].js',
      clean: true,
    },
    externals: [
      {
        jquery: 'jQuery',
        datatables: 'datatables'
      }
    ],
    name: 'NAME',
    entry: {
      'js/project.min': './source/typescript/layouts/project.ts',
      'js/project-vendor.min': './source/vendor/layouts/project-vendor.ts',
    },
    devtool: 'inline-source-map',
    mode: 'development',
    resolve: {
      extensions: ['.ts', '.js', '.json']
    },
    plugins: [
      new MiniCssExtractPlugin({ filename: 'css/project.min.css' }),
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
      })
    ],
    module: {
      rules: [
        { test: /\.(sa|sc|c)ss$/, use: [{ loader: MiniCssExtractPlugin.loader }, 'css-loader','sass-loader',] },
        { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ },
        { test:require.resolve('jquery'), use: [{ 
          loader: &quot;imports-loader&quot;,
            options: {
              imports: {
                moduleName: &quot;jquery&quot;,
                name: &quot;$&quot;,
              },
              additionalCode: &quot;var define = false; var exports = undefined; /* Disable AMD for misbehaving libraries */&quot;,
            }
        }]}
     ]
   }
  },
  </code></pre>
  <p><strong>What I tried:</strong>
  I found this: <a href="https://stackoverflow.com/questions/28969861/managing-jquery-plugin-dependency-in-webpack">Managing jQuery plugin dependency in webpack</a> (Accepted Answer) and it looks like step 3 could fix my problem. But this question is old and the imports-loader changed. (<a href="https://webpack.js.org/loaders/imports-loader/" rel="nofollow noreferrer">https://webpack.js.org/loaders/imports-loader/</a>) And I have no idea how to use it correctly. I tried the jquery-example but it did not work for me. Has anybody an idea or could help me? (:</p>