I want to use jQuery installed in npm on webpack.

I would like to create a webpack4+jQuery+ass environment.
The settings using jQuery do not work, and the following error occurs:

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

ERROR in../js/calender.js
Module not found: Error: Can't resolve 'jquery' in '/private/var/www/test/resource/js'
 @ .../js/calender.js1: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.js1: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.js1:0-17
 @ .../js/index.js

npm install jquery

Executing the above command, the jquery package exists in node_modules.

● Directory Configuration

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

●index.js

import'../scss/style.scss';
import*asutil from'./utility.js'
import* as calendar from'./calender.js'
import* as validate from'./validate.js'
// import* as fetch from'./fetch.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", calendar.prev);
$(".js_calender_next").on("click", calendar.next);

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

● webpack.config.js

// Load webpack to use plug-in

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

module.exports={
    // Main JavaScript file (entry point)
    entry: "../js/index.js",
    mode: "production",
    // File Output Settings
    output: {
        //  Output File Directory Name
        path: path.resolve(__dirname, '../../common/static/webpack',
        // Output File Name
        filename: "bundle.js"
        // Restart webpack if hash value is automatically given or changed
        // filename: "bundle_[hash].js"
    },
    module: {
        rules:[
            {
                test://\.scss/,
                // The directory to be processed by the loader
                include:path.resolve(__dirname, '../scss',
                use:
                    // Ability to print to link tags
                    "style-loader",
                    "css-loader",
                    "sass-loader",
                ]
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
        }),
    ],
};

Removing the whole plugins: in webpack.config.js and listing import $from 'jquery'; on the first line of index.js also results in the following error:

ERROR in../js/index.js
Module not found: Error: Can't resolve 'jquery' in '/private/var/www/test/resource/js'
 @ .../js/index.js1:0-238:0-19: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

I don't know what to do because I haven't seen any similar examples of myself even after reading the official documents or reading various articles...
I would appreciate it if you could tell me about it for a long time.I look forward to your kind cooperation.

jquery npm webpack

2022-09-30 16:21

1 Answers

to index.js

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

You should have added .
●index.js

import'../scss/style.scss';
import$from'../env/node_modules/jquery';
import*asutil from'./utility.js'
import* as calendar 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", calendar.prev);
$(".js_calender_next").on("click", calendar.next);

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

I did not need the following in webpack.config.js.
● webpack.config.js

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

2022-09-30 16:21

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