Exponer jQuery a un objeto de ventana real con Webpack

Quiero exponer el objeto jQuery al objeto de ventana global al que se puede acceder dentro de la consola del desarrollador en el navegador. Ahora en mi configuración de paquete web tengo las siguientes líneas:

plugins: [
                new webpack.ProvidePlugin({
                    $: 'jquery',
                    jQuery: 'jquery'
                })
            ]

Estas líneas agregan las definiciones de jQuery a cada archivo en mis módulos de paquete web. Pero cuando construyo el proyecto e intento acceder a jQuery en la consola de desarrollador de esta manera:

window.$;
window.jQuery;

dice que estas propiedades no están definidas ...

¿Hay alguna forma de solucionar este problema?

Necesita utilizar el cargador de exposición .

npm install expose-loader --save-dev

Puede hacer esto cuando lo necesite:

require("expose?$!jquery");

o puede hacer esto en su configuración:

loaders: [
    { test: require.resolve('jquery'), loader: 'expose?jQuery!expose?$' }
]

ACTUALIZACIÓN : A partir de webpack 2, debe usar expose-loader en lugar de exponer :

module: {
    rules: [{
        test: require.resolve('jquery'),
        use: [{
            loader: 'expose-loader',
            options: '$'
        }]
    }]
}

ProvidePlugin reemplaza un símbolo en otra fuente a través de la importación respectiva, pero no expone el símbolo en el espacio de nombres global. Un ejemplo clásico son los complementos de jQuery. La mayoría de ellos solo esperan jQueryser definidos globalmente. Con el ProvidePlugin, se aseguraría de que jQuery sea una dependencia (por ejemplo, cargada antes) y la aparición de jQueryen su código se reemplazará con el equivalente en bruto del paquete web require('jquery').

Si tiene scripts externos que dependen de que el símbolo esté en el espacio de nombres global (como, digamos, un JS alojado externamente, llamadas de Javascript en Selenium o simplemente accediendo al símbolo en la consola del navegador), desea usar el expose-loader.

En resumen: ProvidePlugin gestiona las dependencias de tiempo de compilación de los símbolos globales, mientras que expose-loadergestiona las dependencias de tiempo de ejecución de los símbolos globales.

Parece que el windowobjeto está expuesto en todos los módulos.

¿Por qué no solo importar / requerir JQueryy poner:

window.$ = window.JQuery = JQuery;

Deberá asegurarse de que esto suceda antes de requerir / importar cualquier módulo que haga uso window.JQuery, ya sea en un módulo requerido o en el módulo donde se está utilizando.

Esto siempre funcionó para mí. incluido para webpack 3 window.$ = window.jQuery = require("jquery");

Ninguno de los anteriores funcionó para mí. (y realmente no me gusta la sintaxis del cargador de exposición). En lugar,

Agregué a webpack.config.js:

var webpack = require('webpack');
module.exports = {
   plugins: [
       new webpack.ProvidePlugin({
           $: 'jquery',
       })     
   ]
}

Que todos los módulos tengan acceso a través de jQuery a través de $.

Puede exponerlo a la ventana agregando lo siguiente a cualquiera de sus módulos incluidos en el paquete web:

window.$ = window.jQuery = $

Actualización para Webpack v2

Instale expose-loader como lo describe Matt Derrick:

npm install expose-loader --save-dev

Luego inserte el siguiente fragmento en su webpack.config.js:

module.exports = {
    entry: {
        // ...
    },
    output: {
        // ...
    },
    module: {
        loaders: [
                { test: require.resolve("jquery"), loader: "expose-loader?$!expose-loader?jQuery" }
        ]
    }
};

(de los documentos de expose-loader )

En mi caso funciona

{ test: require.resolve("jquery"), loader: "expose?$!expose?jQuery" }