webpackを使用してブートストラップをロードするときにjqueryが定義されていない

Question

Webpackを使用する方法を学び始めたばかりです（これまでは手動で個別のスクリプトを個別に使用していました）。ブートストラップの読み込みにはbootstrap-loaderを使用しました。ここに私のwebpack.config.jsは

var path = require("path") 
var webpack = require('webpack') 
var BundleTracker = require('webpack-bundle-tracker') 

module.exports = { 
    context: __dirname, 

    entry: './assets/js/index', // entry point of our app. assets/js/index.js should require other js modules and dependencies it needs 

    output: { 
     path: path.resolve('./assets/bundles/'), 
     filename: "[name]-[hash].js", 
    }, 

    plugins: [ 
     new BundleTracker({filename: './webpack-stats.json'}) 
    ], 

    module: { 
     loaders: [ 
      { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader'}, // to transform JSX into JS 
      { test: /\.css$/, loader: 'style-loader!css-loader'}, // to transform css 
      // images 
      { test: /\.png$/, loader: 'url-loader?limit=100000'}, 
      { test: /\.jpg$/, loader: 'file-loader'}, 
      // bootstrap image files 
      { test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'}, 
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'}, 
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'}, 
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'} 
     ], 
    }, 

    resolve: { 
     modulesDirectories: ['node_modules', 'bower_components'], 
     extensions: ['', '.js', '.jsx'], 
     jquery: './vendor/jquery/jquery.js', 
    }, 
} 

であり、ここでこれが動作しているように私entry.js

global.jQuery = global.$ = require('jquery'); 
require('bootstrap-loader'); 

です。しかし、私は前にこれを使用し、それが動作しませんでした：

window.jQuery = window.$ = require('jquery'); 

私は非常に多くの人々によって提案された上記の行を見つけました。しかし、私は単にページを読み込むときにエラーが出ます。ほんのいくつかの例：some SO question,webpack issue,another SO question。

後で私はthis questionとthis questionを見つけました。したがって、ページは実際にはブートストラップjsの機能と同様に機能します。

私はそれが関連している場合にも、私のpackage.jsonを追加します。

{ 
    "author": "franklingu", 
    "dependencies": { 
    "babel": "^6.5.2", 
    "babel-core": "^6.13.2", 
    "babel-loader": "^6.2.4", 
    "bootstrap-loader": "^1.2.0-beta.1", 
    "bootstrap-sass": "^3.3.7", 
    "extract-text-webpack-plugin": "^1.0.1", 
    "jquery": "^3.1.0", 
    "node-sass": "^3.8.0", 
    "resolve-url-loader": "^1.6.0", 
    "sass-loader": "^4.0.0", 
    "webpack": "^1.13.1", 
    "webpack-bundle-tracker": "0.0.93" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.13.2", 
    "babel-loader": "^6.2.4", 
    "css-loader": "^0.23.1", 
    "file-loader": "^0.9.0", 
    "node-sass": "^3.8.0", 
    "resolve-url-loader": "^1.6.0", 
    "sass-loader": "^4.0.0", 
    "style-loader": "^0.13.1", 
    "url-loader": "^0.5.7", 
    "webpack": "^1.13.1" 
    } 
} 

を私はWebPACKのに新しいですが、私はJSに新しいものではありませんよ。私はなぜwindow.$が機能していないのだろうと思っています。

そして私は、WebPACKのため、一部の人々は、プラグインでこれを示唆した不思議なぜ：

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

一部の人々は、このことを示唆している（どちらか私のために動作しませんでした）：

resolve: { 
    alias: { 
     jquery: "jquery/src/jquery" 
    } 
} 

は、私はと遊びましたノードはしばらくの間、私はノードがロードするために要求jsを使用することを覚えていました（私は共通のvsとamdの違いについてはあまり明確ではありません）。しかし、なぜ何人かの人々が一般的なjsを言いますか？

私はしばらくの間バックエンドを開発していましたが、フロントエンドを始めました。多くの質問が出てきています。あなたが私の疑問をクリアすることができるいくつかのガイドへのリンクを私に提供すれば十分です。これらの基本的な理解を構築します。

Answer 1

は、プラグイン

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

としてこれを追加すると、プロジェクト全体でのjQueryを持つことができるはずです。

プラグインを追加しても問題が解決しない場合は、nodejsサーバを再起動してみてください。 npm install --save jqueryを使用してjqueryをインストールすることを忘れないでください。

Answer 2

プラグインは必要ありません。ただ、エントリとして次を使用します。

entry: [ 
    'jquery', //will load jquery from node_modules 
    './assets/js/index', 
] 

その後ES6 +ファイルの使用中：

import $ from "jquery"; 

Answer 3

私は、これは少し古いですけど、私はそのようにそれを行うために管理：

グローバル。jQuery = require（ 'jquery'）; require（ 'bootstrap'）;