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

I am just starting to learn to use Webpack (previously I just use the manual way to include individual scripts separately). And I used `bootstrap-loader` for loading bootstrap. Here is my 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',
},
}

And here is my entry.js

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

This seems to work. However, I used this before and it did not work:

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

I found the line above suggested by so many people. But I just simply get errors when load the page. Just some examples: [some SO question][1], [webpack issue][2], [another SO question][3].

Later I found [this question][4], and [this question][4]. So the page actually works with bootstrap js functionality working as well.

I will add my package.json as well in case it is 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 am new to webpack but I am not new to JS. I am wondering why `window.$` is not working.

And I wonder, for webpack, why some people suggested this in plugins:

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

Some people are suggesting this (did not work for me either):

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

I played with node for a while back then and I remembered that node makes use of request js for loading(I am not very clear about differences between common vs require vs amd though). But why some people mention common js?

I was developing backend for some time and just started frontend--so many questions are popping up. It would just enough if you provide me with some link to some guide to read which can clear my doubts/build my basic understanding of these.


[1]:

[To see links please register here]

[2]:

[To see links please register here]

[3]:

[To see links please register here]

[4]:

[To see links please register here]

Add this as plugin

new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
and you should be able to have jquery in your whole project.

If issue persists after adding the plugin, try restarting your `nodejs` server. Remember to install `jquery` using `npm install --save jquery`.

Plugin is not needed. Just use following as entry:

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

Then in ES6+ file use:

import $ from "jquery";

I know this is a bit old, but I managed to do it like that :

global.jQuery = require('jquery');
require('bootstrap');

I want to share my findings for any future developer who might have the same use-case I do.

I had the requirement to only create a vendor bundle and not an app bundle for an **AngularJS** (1.7.2) app, using **Webpack 4** (4.16.4). I think because I was only creating a vendor bundle, none of the other solutions worked. Only `expose-loader` worked for me, like so:


// webpack.config.js
module: {
rules: [
{
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: 'jQuery'
},
{
loader: 'expose-loader',
options: '$'
}
]
}
]
}

For more information:

[To see links please register here]