webpack – exposing jQuery as a global variable

webpack is an incredibly powerful tool, but finding examples of simple things are far and few between. i spent the better part of the day trying to figure out how to include jQuery as part of the global scope. first the sample webpack.config.js file:

in the webpack.config.js file, you need to add a section in resolve and set up an alias (jquery) to the jQuery file. once that’s done, you need to add a line in your entry file to expose jQuery as a global via the expose loader.

in app.js:

in this example, we are running the expose loader plugin twice to bind $ and jQuery to global scope.

also in your project, make sure to include the expose loader via the npm command:

and that’s it! jQuery is now bound to global scope as if you did a call.

webpack – chunk files not found

i’ve started my foray into webpack which appears to be quite promising, but the documentation is overwhelming and not very gentle for the newcomer.

i was trying to figure out how to asynchronously load files with webpack using CommonJS modules. apparently, if you specify an output.path in webpack, you will also need to specify the output.publicPath option so that webpack knows how to find the chunks.

an example working webpack.config.js file: