

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

[webpackでjqueryを使用、しかし「$ is not defined」のエラー -
teratail](https://teratail.com/questions/215905)

こちらを参考にして `plugins:` を記載したのですが、`webpack --watch` の時点でエラーが出てしまいました。

**ディレクトリ構造**

[![ディレクトリ構造](https://i.stack.imgur.com/8KhwW.jpg)](https://i.stack.imgur.com/8KhwW.jpg)

**webpack.config.js**

[code]

    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',
            }),
        ],
    };
    
[/code]

**index.js**

[code]

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

**utility.js**

[code]

    export function modalOpen() {
        console.log("hello");
    }
    
    export function changeBig() {
        $("#js_open").css("width", "40px");
    }
    
[/code]

**package.json**

[code]

    {
      "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"
      }
    }
    
[/code]

**エラーメッセージ**

[code]

    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.
    
[/code]


CC BY-SA 4.0
2020-02-12T06:48:04.210
62992
2020-02-12T08:28:37.420
2020-02-12T07:26:30.937
3060
37807
question
jquery webpack
webpackでjQueryをすべてのjsファイル内で使いたい


webpack.config.jsの一番最初に

[code]

    const webpack = require('webpack');
    
[/code]

を追加したところ解決しました。


CC BY-SA 4.0
2020-02-12T08:28:37.420
62994
2020-02-12T08:28:37.420
37807
62992
answer