正しく対処する方法WebpackとjQueryの依存関係

Question

私はVue CLIに基づいてプロジェクトを作成し、プロジェクトにMaterializeCSSを追加しました。

のDevとPROD：：私は私のwebpack.dev.conf.js、webpack.prod.conf.jsと以下のようwebpack.base.conf.js（のみsupppose関連部分）を変更し

plugins: [ 
    new webpack.ProvidePlugin({ 
     $: 'jquery', 
     jQuery: 'jquery', 
     'window.$': 'jquery', 
     'window.jQuery': 'jquery', 
    }) 
    ] 

ベース：

resolve: { 
extensions: ['.js', '.vue', '.json'], 
alias: { 
    '$': 'jquery', 
    'jQuery': 'jquery', 
    'window.$': 'jquery', 
    'window.jQuery': 'jquery',  
    '@': resolve('src'), 
    'vue$': 'vue/dist/vue.esm.js' 
} 

main.jsはこれを持っていますコンテンツ：

​​

私は$('#modal').modal('open')を呼び出すと、初期化の後、私はメッセージを受け取る：私が正しくメソッドを使用して、VueJSディレクティブとMaterializecssを扱うとき

Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0_jquery__(...).modal is not a function 
at Object.displayLoading (eval at <anonymous> (0.js:278), <anonymous>:10:55) 
at VueComponent.searchBCP (eval at <anonymous> (0.js:293), <anonymous>:107:63) 
at boundFn (eval at <anonymous> (app.js:810), <anonymous>:125:14) 
at HTMLButtonElement.invoker (eval at <anonymous> (app.js:810), <anonymous>:1659:18) 
displayLoading @ display-loading.js?d781:6 
searchBCP @ script.js?7493:104 
boundFn @ vue.esm.js?65d7:124 
invoker @ vue.esm.js?65d7:1658 

私の問題もあります。誰もこの困難に直面したことはありますか？

Answer 1

あなたはmyfile.jsに$を参照する場合は、main.jsに持つべきjqueryの を参照したいファイルに適切なインポートが欠落しています

myfile.jsに追加されます

require("imports-loader?$=jquery!./myfile.js"); 

：

var $ = require("jquery"); 

参照をここに参照してください：https://webpack.github.io/docs/shimming-modules.html

Answer 2

jQueryが実行時に依存関係をバンドルして取得しないようにするには、webpack設定ファイルでexternals設定を使用できます。

externals: { 
    $: "jquery", 
    jQuery: "jquery", 
    "window.jQuery": "jquery" 
}