Webpack: expressing module dependency

amd, requirejs, webpack

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!

Best Solution

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.jsmodule.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.