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

Question

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, webpack issue, another SO question.

Later I found this question, and this question. 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.

Answer 1

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.