Webpack 2, jQuery plugins and imports-loader

It was simple to use jQuery plugins “back in the days”.

<script src="jquery.js"></script>
<script src="jquery.slider.js"></script>
<script src="app.js"></script>

But if you wanna be cool and install plugins with npm and import them as ES6 modules, this isn’t the way to go. Instead, you’d like to do something fancy like this:

// app.js
import $ from 'jquery';

But that won’t be enough. You have to import the slider plugin to, and that’s a headache to figure out how to do.
You could require() the plugin, but since it’s most likely looking for a global window.jQuery variable, this won’t work.

The solution is to use the imports-loader Webpack plugin.

npm install imports-loader

Now you can require() the plugin and inject jQuery as a global.

// app.js
import $ from 'jquery';

Consider this mostly as a note to my future self.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.