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.

Answer 2

Via this github issue.

Install expose-loader and add require('expose?$!expose?jQuery!jquery'); to your main entry point just before you require webpack-bootstrap.

This will set jQuery on the window so any file can get at it. Be careful with this method all files will then have access to that version of jQuery regardless of whether it was explicitly required.