webpackでjQueryをすべてのjsファイル内で使いたい

Question

webpack+scss+jQuery環境を作ろうとしています。
webpack+scssまではできたのですが、jQuery環境がうまくいきません。
index.js内でもutility.js内でも $ が使えるようにしたいです。

webpackでjqueryを使用、しかし「$ is not defined」のエラー
https://teratail.com/questions/215905
上記を参考にしてwebpack.config.jsにplugins:を記載したのですが、ターミナルでwebpack --watchコマンドを打った時点でエラーが出てしまいました。

webpack.config.jsの正しい書き方を教えていただきたいです。

ディレクトリ構造

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

//index.js
import '../scss/test.scss';
// import $ from 'jquery'
import * as util from './utility.js'
///////////////////////////////////////////////////////////////////////
document.getElementById("js_open").addEventListener("click", util.modalOpen, false);
$("#js_open").on("click", util.changeBig);

//utility.js
export function modalOpen() {
    console.log("hello");
}

export function changeBig() {
    $("#js_open").css("width", "40px");
}

//package.json
{
  "scripts": {
    "build": "webpack --watch"
  },
  "dependencies": {
    "css-loader": "^3.4.2",
    "jquery": "^3.4.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"
  }
}

ReferenceError: webpack is not defined
    at Object.<anonymous> (/private/var/www/webpack_test/webpack.config.js:42:13)
    at Module._compile (/private/var/www/webpack_test/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:785:10)
    at Module.load (internal/modules/cjs/loader.js:641:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:681:19)
    at require (/private/var/www/webpack_test/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at WEBPACK_OPTIONS (/private/var/www/webpack_test/node_modules/webpack-cli/bin/utils/convert-argv.js:114:13)
    at requireConfig (/private/var/www/webpack_test/node_modules/webpack-cli/bin/utils/convert-argv.js:116:6)
    at /private/var/www/webpack_test/node_modules/webpack-cli/bin/utils/convert-argv.js:123:17
    at Array.forEach (<anonymous>)
    at module.exports (/private/var/www/webpack_test/node_modules/webpack-cli/bin/utils/convert-argv.js:121:15)
    at /private/var/www/webpack_test/node_modules/webpack-cli/bin/cli.js:71:45
    at Object.parse (/private/var/www/webpack_test/node_modules/yargs/yargs.js:567:18)
    at /private/var/www/webpack_test/node_modules/webpack-cli/bin/cli.js:49:8
    at Object.<anonymous> (/private/var/www/webpack_test/node_modules/webpack-cli/bin/cli.js:366:3)
    at Module._compile (internal/modules/cjs/loader.js:774:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:785:10)
    at Module.load (internal/modules/cjs/loader.js:641:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:681:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (/private/var/www/webpack_test/node_modules/webpack/bin/webpack.js:156:2)
    at Module._compile (internal/modules/cjs/loader.js:774:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:785:10)
    at Module.load (internal/modules/cjs/loader.js:641:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Function.Module.runMain (internal/modules/cjs/loader.js:837:10)
    at internal/main/run_main_module.js:17:11
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ build: `webpack --watch`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Answer 1

ReferenceError: webpack is not defined

エラーメッセージのとおりです。webpack.config.js内でwebpackを使う場合、const webpack = require('webpack');のような呼び出しが必要です。

---

本題ではありませんが、ProvidesPluginは使わず、import $ from 'jquery'を、jQueryを使うファイルごとに書くことをおすすめします。

Comments

[xyunow]

回答いただきありがとうございます。
webpack is not definedって何だ…？と思っていたのですが、
new webpack.ProvidePluginでwebpackを使っているから呼び出しが必要なんですね。もう少し深堀りしてみます。

＞ProvidesPluginは使わず、import $ from 'jquery'を、jQueryを使うファイルごとに書くことをおすすめします。
書き方についてもありがとうございます。ファイルごとにimport $ from 'jquery'を書きたくないなぁと思いやり方を探っていたのですが（書くのを忘れそうなので）、
そのようにしようと思います。

Answer 2

webpack.config.jsの一番最初の行に以下を追加したところいけました。

const webpack = require('webpack');