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 fol

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.