

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

[code]

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

> npm install jquery

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

●ディレクトリ構成

[code]

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

●index.js

[code]

    import '../scss/style.scss';
    import * as util from './utility.js'
    import * as calender 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", calender.prev);
    $(".js_calender_next").on("click", calender.next);
    
    $(".js_select_role").on("change", validate.contractCheck);
    
[/code]

●webpack.config.js

[code]

    // プラグインを利用するために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",
            }),
        ],
    };
    
[/code]

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

[code]

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

公式ドキュメントを読んでも、色々な記事を読んでみても自分と似たような例がなく、正直どうしたら良いかわからないです…  
長いですが教えていただけると幸いです。よろしくおねがいします。


CC BY-SA 4.0
2020-07-02T20:45:31.983
68227
2020-07-03T06:45:47.157
2020-07-03T02:05:59.520
37807
37807
question
jquery npm webpack
webpackでnpmでインストールしたjQueryを使いたい


index.jsに

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

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

[code]

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

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

[code]

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


CC BY-SA 4.0
2020-07-03T06:45:47.157
68238
2020-07-03T06:45:47.157
37807
68227
answer