Webpack: expressing module dependency

Question

I'm trying to require the bootstrap-webpack module in my webpacked application.

It appears to need jQuery, since the bundled javascript then throws the following:

Uncaught ReferenceError: jQuery is not defined

How do I go about specifying to webpack that jQuery is a dependency for the bootstrap-webpack module, to fix this issue? It feels like it should be trivial, but I've been struggling to figure it out.

I've tried adding:

"jquery": "latest"

to the dependecies in the bootstrap-webpack's package.json, but this didn't work. The documentation is incomplete, and I can't seem to find much about this issue. It should be trivial, right? Help!

Answer 1

There are two possible solutions:

Use the ProvidePlugin: It scans the source code for the given identifier and replaces it with a reference to the given module, just like it has been required.

// webpack.config.js
module.exports = {
    ...
    plugins: [
        new webpack.ProvidePlugin({
           $: "jquery",
           jQuery: "jquery"
       })
    ]
};

Use the imports-loader: It provides the possibility to prepend preparations like require() statements.

// webpack.config.js
{
    ...
    module: {
        loaders: [
            { test: require.resolve("jquery"), loader: "imports?jQuery=jquery" }
        ]
    }
}

In that case you need to run npm install imports-loader --save before.