Webpack経由でjQueryを読み込めません

私はASP.NET MVCアプリケーションを持っています。このアプリでは、私はVueとwebpackでSPAを構築しています。現時点では、このdatepickerコントロールをインポートしようとしています。Webpack経由でjQueryを読み込めません

残念ながら、webpackは問題を引き起こしているようです。主な依存関係、jQueryはロードされていないように見えますが、その理由を理解できません。

私は、次のしている：

_Layout.cshtml

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>My App</title> 

    <script src="~/js/shared.bundle.js" asp-append-version="true"></script> 
</head> 

<body> 
    <h1>Hello</h1> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      console.log("ready!"); 
     }); 
    </script> 
</body> 
</html>

webpack.config.js

"use strict"; 

const path = require('path'); 

const webpack = require('webpack'); 

module.exports = { 
    entry: { 
     shared: './src/js/shared.js', 
     page: './src/js/page.js' 
    }, 
    plugins: [ 
     new webpack.ProvidePlugin({ 
      '$': 'jquery', 
      jQuery: 'jquery', 
      'window.jQuery': 'jquery', 
      Popper: ['popper.js', 'default'], 
      moment: 'moment', 
     }), 
     new webpack.optimize.CommonsChunkPlugin({ name: 'shared' }) 
    ], 
    output: { 
     publicPath: "/js/", 
     path: path.join(__dirname, '/dist/'), 
     filename: '[name].bundle.js' 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.js$/, 
       loader: 'babel-loader', 
       exclude: /(node_modules)/, 
       query: { 
        presets: ['es2015'] 
       } 
      }, 
      { 
       test: /\.vue$/, 
       loader: 'vue-loader', 
      } 
     ] 
    }, 
    resolve: { 
     alias: { 
      vue: 'vue/dist/vue.js' 
     }, 
     extensions: ['.js', '.vue'] 
    } 
};

Index.cshtml

<h2>Welcome</h2> 
<hr /> 

<div id="view" v-cloak> 
    <div class="card"> 
     <div class="card-header"><h5>Selection Details</h5></div> 
     <div class="card-body"> 
      <div class="form-row"> 
       <div class="form-group col-8"> 
        <label for="birthdate">Birthdate</label> 
        <date-picker v-model="birthDate"></date-picker> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

<script type="text/javascript" src="~/js/page.js" asp-append-version="true"></script>

page.js

import Vue from 'vue'; 

import datePicker from 'vue-bootstrap-datetimepicker'; 

$(document).ready(function() { 
    var v = new Vue({ 
     el: document.getElementById('view'), 
     components: { 
      "datePicker": datePicker 
     }, 
     data: { 
      birthDate: null 
     } 
    } 
});

ブラウザでこのページの負荷が、私はコンソールウィンドウに次のエラーを参照してください。

キャッチされないにReferenceError：$が

が定義されていません。

これは、これが私のページ内でdatepickerが正常に動作していない原因であると思われます。私はこのエラーを理解していません。私の理解から、new webpack.ProvidePlugin({ ...という行がこの問題を処理しているはずです。生成された "shared.bundle.js"ファイルを見ると、先頭にjQueryのコンテンツが表示されます。これは私をさらに混乱させます。なぜこのエラーが出るのか分かりません。どんな助けもありがとう！

出典

2017-10-16 Zach Templeton

[Uncaught ReferenceError：$は定義されていませんか？]（https://stackoverflow.com/questions/2075337/uncaught-referenceerror-is-not-defined） – jordiburgos