title: How to include jquery-ui file in webpack?
body: <p><strong>Desired Behaviour</strong></p>
  
  <p>Include jQuery UI in webpack build.  </p>
  
  <p><strong>Actual Behaviour</strong></p>
  
  <p>Error when running webpack:</p>
  
  <blockquote>
    <p>ERROR in ./src/js/jquery-ui.js<br>
    Module not found: Error: Can't resolve<br>
    'jquery' in 'C:\Me\Documents\my_repo\src\js' </p>
  </blockquote>
  
  <p><strong>What I've Tried</strong></p>
  
  <p>I tried adding this to <code>webpack.config.js</code> but it didn't change anything:</p>
  
  <pre><code>plugins: [
     new UglifyJsPlugin(),
     new webpack.ProvidePlugin({
          $: "./jquery-3.3.1",
          jQuery: "./jquery-3.3.1",
          jquery: "./jquery-3.3.1"
      })
  ]
  </code></pre>
  
  <p>I also tried adding this to <code>webpack.config.js</code> (so that the path is relative to location of <code>webpack.config.js</code>) and that caused additional errors <code>Module not found: Error: Can't resolve '/src/js/jquery-3.3.1'</code>:</p>
  
  <pre><code>plugins: [
     new UglifyJsPlugin(),
     new webpack.ProvidePlugin({
          $: "/src/js/jquery-3.3.1",
          jQuery: "/src/js/jquery-3.3.1",
          jquery: "/src/js/jquery-3.3.1"
      })
  ],
  </code></pre>
  
  <p><strong>Steps To Replicate</strong></p>
  
  <p>1)  Go to jQuery UI <a href="https://jqueryui.com/download/" rel="nofollow noreferrer">download builder</a><br>
  2)  Select the <em>following only</em> and download the file:</p>
  
  <p>-- Version 1.12.1<br>
  -- Effects > "Effects Core"<br>
  -- Effects > "Slide Effect"<br>
  -- Theme > "No Theme"  </p>
  
  <p>In the unzipped folder, get the <code>jquery-ui.js</code> file.  </p>
  
  <p>Note:  I only need slide effect, not all of jQuery UI, hence the custom download.  </p>
  
  <p><strong>my_entry_file.js</strong></p>
  
  <pre><code>import './jquery-ui';
  </code></pre>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre><code>const path = require('path');
  const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); 
  
  var webpack = require("webpack");
  
  module.exports = {
      entry: "./src/js/my_entry_file.js",
      output: {
          filename: "bundle.js",
          path: path.resolve(__dirname, "dist/js")
      },
      module: {
          rules: [{
                  test: /\.js$/,
                  exclude: /(node_modules)/,
                  use: {
                      loader: "babel-loader",
                      options: {
                          presets: ["env", "stage-0"]
                      }
                  }
              },
              {
                  test: /\.css$/,
                  use: [
                      { loader: "style-loader" },
                      { loader: "css-loader" }
                  ]
              },
              {
                  test: /\.less$/,
                  use: [
                      { loader: "style-loader" },
                      { loader: "css-loader" },
                      { loader: "less-loader" }
                  ]
              },
              {
                  test: /\.jpg$/,
                  use: [
                      { loader: "url-loader" }
                  ]
              },
              {
              test: path.resolve(__dirname, 'src/js/jquery-3.3.1'),
              use: [{
              loader: 'expose-loader',
              options: '$'
              }]
              }
          ]
      },
      plugins: [
         new UglifyJsPlugin(),
         new webpack.ProvidePlugin({
              $: "./jquery-3.3.1",
              jQuery: "./jquery-3.3.1"
          })
      ],
      resolve: {
      alias: {
          'uikit-util': path.resolve(__dirname, 'node_modules/uikit/src/js/util')
      }
      }
  }
  </code></pre>