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.