Webpack and jQuery plugins

In a project, I recently wanted to migrate jQuery and jQuery plugins to a Webpack based build setup. Turns out this is more complicated than anticipated!

Here's the working configuration for me, with explanations following below:


const webpack = require('webpack');
const path = require('path');

module.exports = {
entry: {
app: [
module: {
rules: [
test: /(jquery.magnific-popup.min.js|slick.min.js|jquery.unveil2.js|readmore.min.js)/,
loader: "imports-loader?define=>undefined,exports=>undefined"
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
resolve: {
alias: {
'jquery$': path.resolve(__dirname, 'Resources/Private/Js/vendor/jquery.min.js'),


// the following two lines load jQuery AND expose it on the window object. (window.jQuery, window.$)
window.$ = window.jQuery;


  • index.js - we first use the expose-loader to expose jQuery to the global state before loading other scripts
  • because many jQuery plugins use some kind of "AMD/CommonJS/plain" detection logic, we need to explicitely disable this; because otherwise they will not find the global jQuery.
    • The best way to disable we found was using the imports-loader; actually un-setting the "define" and "exports" statements.