$ is not defined when use webpack.ProvidePlugin

Question

I'm trying to use jquery with webpack but even though I use Webpack Provider plugin like:

new webpack.ProvidePlugin({
    'window.jQuery': 'jquery',
    'window.$': 'jquery',
    $: 'jquery'
})

Seems like does not expose my jQuery to window global scope.

Answer 1

As I understand it, the ProvidePlugin provides those variables to other WebPacked code but not external code or inline scripts.

The 'expose-loader' plugin alternately exposes global variables outside of the webpacked bundles. Add the following to your rules to define global jQuery and $ variables that point to your bundled jQuery.

rules:[
...
// Expose jquery globally for inline/legacy use
{
    test: require.resolve('jquery'),
    use: [
        { loader: 'expose-loader', options: 'jQuery' },
        { loader: 'expose-loader', options: '$' }
    ]
},
...
]