javascript - 'jquery is not defined' when using webpack to load bootstrap -

i starting learn use webpack (previously use manual way include individual scripts separately). , used bootstrap-loader loading bootstrap. here 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 , dependencies 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'}, // transform jsx js             { test: /\.css$/, loader: 'style-loader!css-loader'}, // 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',     }, } 

and here entry.js

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

this seems work. however, used before , did not work:

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

i found line above suggested many people. errors when load page. examples: some question, webpack issue, another question.

later found this question, , this question. page works bootstrap js functionality working well.

i add package.json in case relevant:

{   "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"   } } 

i new webpack not new js. wondering why window.$ not working.

and wonder, webpack, why people suggested in plugins:

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

some people suggesting (did not work me either):

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

i played node while , remembered node makes use of request js loading(i not clear differences between common vs require vs amd though). why people mention common js?

i developing backend time , started frontend--so many questions popping up. enough if provide me link guide read can clear doubts/build basic understanding of these.

add plugin

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

and should able have jquery in whole project.

if issue persists after adding plugin, try restarting nodejs server. remember install jquery using npm install --save jquery.