I want to use jQuery in all js files in webpack

I am trying to create a webpack+scss+jQuery environment.
I was able to do webpack+scss, but the jQuery environment doesn't work.
I want to be able to use $ in index.js and utility.js.

Use jquery in webpack, but error "$is not defined" - teratail

I wrote plugins:, but I got an error when I wrote webpack --watch.

directory structure

webpack.config.js

module.exports={
    // Main JavaScript file (entry point)
    entry: "./js/index.js",
    mode: "development",
    // File Output Settings
    output: {
        //  Output File Directory Name
        path: `${__dirname}/dist`,
        // Output File Name
        filename: "bundle.js"
        // Restart webpack if hash value is automatically given or changed
        // filename: "bundle_[hash].js"
    },
    module: {
        rules:[
            {
                test://\.css/,
                use:
                    // Ability to print to link tags
                    "style-loader",
                    "css-loader"
                ]
            },
            {
                test://\.scss/,
                use:
                    // Ability to print to link tags
                    "style-loader",
                    {
                        loader: 'css-loader',
                        options: {
                            // Use the relative path
                            url —false,
                        },
                    },
                    "sass-loader",
                ]
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
        }),
    ],
};

index.js

import'../scss/test.scss';
import*asutil 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-ass": "^4.13.1",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.1.3",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  }
}

error message

ReferenceError: webpack is not defined
    at Object.<anonymous>(/private/var/wwww/webpack_test/webpack.config.js:42:13)
    atModule._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/wwww/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/wwww/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/wwww/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/wwww/webpack_test/node_modules/webpack-cli/bin/cli.js:49:8
    at Object.<anonymous>(/private/var/wwww/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/wwww/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!errno1
npm ERR!@build: `webpack --watch`
npm ERR! Exit status 1
US>npm ERR! 
npm ERR! Failed at the @build script.
npm ERR! This is probable not a problem with npm. There is like additional logging output above.

jquery webpack

2022-09-29 21:40

1 Answers

The first one in webpack.config.js is

const webpack=require('webpack');

Resolved after adding .

2022-09-29 21:40

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656