webpack4でnpmでインストールしたjQueryを使いたい

Question

webpack4+jQuery+sass環境を作りたいのですが、
jQueryを読み込む設定がうまくいかず、下記のようなエラーが出てしまいます。

ERROR in ../js/index.js
Module not found: Error: Can't resolve 'jquery' in '/private/var/www/test/resource/js'
 @ ../js/index.js 1:0-17

ERROR in ../js/calender.js
Module not found: Error: Can't resolve 'jquery' in '/private/var/www/test/resource/js'
 @ ../js/calender.js 1:0-17
 @ ../js/index.js

ERROR in ../js/utility.js
Module not found: Error: Can't resolve 'jquery' in '/private/var/www/test/resource/js'
 @ ../js/utility.js 1:0-17
 @ ../js/index.js

ERROR in ../js/validate.js
Module not found: Error: Can't resolve 'jquery' in '/private/var/www/test/resource/js'
 @ ../js/validate.js 1:0-17
 @ ../js/index.js

npm install jquery

上記のコマンドを実行し、node_modulesの中にjqueryパッケージは存在している状態です。

●ディレクトリ構成

.
├── common
│   └── static
│       └── webpack
│           └── bundle.js
└── resource
    └── env
        ├── node_modules
        └── package-lock.json
        └── package.json
        └── webpack.config.js
    └── js
        └── index.js
        └── utility.js
        └── calender.js
        └── validate.js
    └── scss
        └── style.scss
            └── utility
                └── utility.scss

●index.js

import '../scss/style.scss';
import * as util from './utility.js'
import * as calender from './calender.js'
import * as validate from './validate.js'
///////////////////////////////////////////////////////////////////////
$(".js_backdrop_trigger").on("click", util.backdropOpen);
$(".js_backdrop_area").on("click", util.backdropAreaClose);
$(".js_backdrop_close").on("click", util.backdropButtonClose);

$(".js_dialog_trigger").on("click", util.dialogOpen);
$(".js_dialog_close").on("click", util.dialogAreaClose);
$(".js_dialog_close").on("click", util.dialogButtonClose);

if($(".js_calender").length!=0){
    $(window).on('load', calender.initialSelect);
    $(window).on('load', calender.changeSendDate);
}
$(".js_calender_prev").on("click", calender.prev);
$(".js_calender_next").on("click", calender.next);

$(".js_select_role").on("change", validate.contractCheck);

●package.json

{
  "scripts": {
    "w": "webpack --watch"
  },
  "dependencies": {
    "css-loader": "^3.4.2",
    "jquery": "^3.5.1",
    "node-sass": "^4.13.1",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.1.3",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  }
}

●webpack.config.js

// プラグインを利用するためにwebpackを読み込んでおく

const webpack = require('webpack');
const path = require('path');

module.exports = {
    // メインとなるJavaScriptファイル（エントリーポイント）
    entry: "../js/index.js",
    mode: "production",
    // ファイルの出力設定
    output: {
        //  出力ファイルのディレクトリ名
        path: path.resolve(__dirname, '../../common/static/webpack'),
        // 出力ファイル名
        filename: "bundle.js"
        // hash値自動付与 変更時はwebpack再起動
        // filename: "bundle_[hash].js"
    },
    module: {
        rules: [
            {
                test: /.scss/,
                //ローダーの処理対象となるディレクトリ
                include: path.resolve(__dirname, '../scss'),
                use: [
                    // linkタグに出力する機能
                    "style-loader",
                    "css-loader",
                    "sass-loader",
                ]
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
        }),
    ],
};

webpack.config.js内のplugins:をまるごと削除して、index.jsの1行目にimport $ from 'jquery';を記載しても以下のようなエラーが出てしまいます。

ERROR in ../js/index.js
Module not found: Error: Can't resolve 'jquery' in '/private/var/www/test/resource/js'
 @ ../js/index.js 1:0-23 8:0-1 9:0-1 10:0-1 12:0-1 13:0-1 14:0-1 16:3-4 17:4-5 18:4-5 20:0-1 21:0-1 23:0-1

公式ドキュメントを読んでも、色々な記事を読んでみても自分と同じ状態らしきものがなく、お手上げ状態です…
長いですがアドバイスいただけると幸いです。よろしくおねがいします。

Answer 1

index.jsに

import $ from '../env/node_modules/jquery';

を追加したらいけました。
●index.js

import '../scss/style.scss';
import $ from '../env/node_modules/jquery';
import * as util from './utility.js'
import * as calender from './calender.js'
import * as validate from './validate.js'
///////////////////////////////////////////////////////////////////////
$('.js_slider').slick({
    arrows: false,
    dots: true,
});
$(".js_backdrop_trigger").on("click", util.backdropOpen);
$(".js_backdrop_area").on("click", util.backdropAreaClose);
$(".js_backdrop_close").on("click", util.backdropButtonClose);

$(".js_dialog_trigger").on("click", util.dialogOpen);
$(".js_dialog_close").on("click", util.dialogAreaClose);
$(".js_dialog_close").on("click", util.dialogButtonClose);

if($(".js_calender").length!=0){
    $(window).on('load', calender.initialSelect);
    $(window).on('load', calender.changeSendDate);
}
$(".js_calender_prev").on("click", calender.prev);
$(".js_calender_next").on("click", calender.next);

$(".js_select_role").on("change", validate.contractCheck);

webpack.config.jsに記載していた、以下は不要でした
●webpack.config.js

plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
        }),
    ],