title: How do you access the jQuery object ($) in an entry file when using Webpack 4?
body: <p>I have a very simple Webpack 4 example where I am trying to access the jQuery object in my entry file in order to manipulate the DOM.  I have pared it down to what I think is the bare minimum having researched extensively. </p>
  
  <p>I expect the example to set the background color of the <code>body</code> to cyan upon page load. Can't seem to get it to do anything.  Looks like the <code>$</code> variable exposed in the entry file is <strong>not</strong> the same <code>$</code> variable in the browser.</p>
  
  <p><strong>UPDATE - PROBLEM SOLVED</strong>:  I was misusing <code>jQuery</code> below.</p>
  
  <p><strong>Original</strong> (defective) entry file (<code>src/app.js</code>):</p>
  
  <pre><code>import 'jquery';
  
  $(() =&gt; {
    $('body').bgColor = 'cyan';
  });
  </code></pre>
  
  <p><strong>Corrected</strong> entry file:</p>
  
  <pre><code>import 'jquery';
  
  $(() =&gt; {
    $('body').css('background-color', 'cyan');
  });
  </code></pre>
  
  <p>I use the <code>ProvidePlugin</code> as documented <a href="https://webpack.js.org/plugins/provide-plugin/" rel="nofollow noreferrer">here</a>.  Here is my simple <code>webpack.config.js</code> file:</p>
  
  <pre><code>const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const webpack = require("webpack");
  
  module.exports = {
    entry: {
      app: './src/app.js',
    },
      output: {
        filename: 'bundle.js',
          path: path.resolve(__dirname, 'dist')
      },
      plugins: [
        new webpack.ProvidePlugin({
          $: 'jquery',
          jQuery: 'jquery'
        }),
        new HtmlWebpackPlugin()
      ],
      devtool: 'inline-source-map'
  }
  </code></pre>
  
  <p>Webpack compiles just fine and the page opens (using <code>webpack-dev-server</code>), but the background color does not change to cyan as expected. When I log the value of <code>$('body')</code> in the <code>app.js</code> file, I get <code>undefined</code>.</p>
  
  <p>Here is the <code>package.json</code> file:</p>
  
  <pre><code>{
    "name": "foo",
    "version": "1.0.0",
    "description": "",
    "private": true,
    "scripts": {
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",
      "build": "webpack",
      "start": "webpack-dev-server --inline --open"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "html-webpack-plugin": "^3.2.0",
      "webpack": "^4.16.5",
      "webpack-cli": "^3.1.0",
      "webpack-dev-server": "^3.1.5"
    },
    "dependencies": {
      "jquery": "^3.3.1"
    }
  }
  </code></pre>
  
  <p>Feels like I have a fundamental lack of understanding of how this is supposed to work.  Thanks. Your help is greatly appreciated.</p>