Webpack 2, jQuery plugins and imports-loader

Stefan Ledin
Jul 21, 2017 · 1 min read

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';
$('.slider').slider();

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';
require('imports-loader?window.jQuery=jquery!./node_modules/path-to-slider-script.js');
$('.slider').slider();

Consider this mostly as a note to my future self.

Web developer who makes fast WordPress sites with clean code and awesome backends. Also, JavaScript is nice!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade