Webpack - webpack.config.jsonのスクリプトローダーを使用

Question

私は今、ウェブパックの世界に自分の足元を浸し始めています。私はvueifyで素晴らしいVue.jsを使用しているので、私のモジュールはES6です。

私が抱えている難しさは、サードパーティ製のjQueryプラグインを読み込むことです。私はProvidePluginを使用してjQueryをロードしています。これはうまくいきます。

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

次に、その他のjQueryプラグインを含むpluginsというディレクトリがあります。私の理解は、スクリプトローダーはバンドルされたファイルにこれらを文字列としてロードするだけで、バンドルがロードされると評価されます。これらのスクリプトは、通常のスクリプトタグで読み込まれた場合と同じように使用できます（インポート不要）。

しかし、私はちょうど動作するようにプラグインのいずれかを取得できません。以下は私のローダー配列です。私が間違っていること（またはやっていないこと）は何ですか？私はWebPACKので動作するようにjQueryのプラグインを得ることの難しさに共感することができますlibにパス

Answer 1

new webpack.ProvidePlugin({ 
    'React': path.resolve(__dirname, "node_modules/react/react"), 
    'ReactDOM': path.resolve(__dirname, "node_modules/react-dom/dist/react-dom"), 
    "jQuery": path.resolve(__dirname, "node_modules/jquery/dist/jquery"), 
    "$": path.resolve(__dirname, "node_modules/jquery/dist/jquery") 
}) 

決意。この特定の構成に対する解決策はありませんが、CDNを使用して、さらにトラブルシューティングを行うまで開発を続けておくと便利です。以下は例です。 index.jsで

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 

または何あなたのメインエントリポイントがある：あなたのWebPACKの設定で

import $ from 'jquery' 

：

externals: { 
    jquery: 'jQuery' 
} 

ので、あなたの.htmlテンプレートファイルで

このアプローチでは、スクリプトタグを直接使用することにより、機会を一時的に犠牲にしながら、より確実に動作する可能性があります最適化とバンドルのために。

Answer 2

loaders: [ 

     // process *.vue files using vue-loader 
     { 
      test: /\.vue$/, 
      loader: 'vue' 
     }, 
     // process *.js files using babel-loader 
     // the exclude pattern is important so that we don't 
     // apply babel transform to all the dependencies! 
     { 
      test: /\.js$/, 
      loader: 'babel', 
      exclude: /node_modules/ 
     }, 
     { 
      test: /plugins\.js$/, 
      loader: 'script-loader' #tried script too 
     } 

    ]