Exponha o jQuery a um objeto Window real com Webpack

Quero expor o objeto jQuery ao objeto de janela global que pode ser acessado dentro do console do desenvolvedor no navegador. Agora, na configuração do meu webpack, tenho as seguintes linhas:

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

Essas linhas adicionam as definições jQuery a cada arquivo em meus módulos do webpack. Mas quando eu construo o projeto e tento acessar o jQuery no console do desenvolvedor assim:

window.$;
window.jQuery;

diz que essas propriedades são indefinidas ...

Existe uma maneira de corrigir isso?

Você precisa usar o carregador de exposição .

npm install expose-loader --save-dev

Você pode fazer isso quando precisar:

require("expose?$!jquery");

ou você pode fazer isso em sua configuração:

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

ATUALIZAÇÃO : a partir do webpack 2, você precisa usar expose -loader em vez de expor :

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

O ProvidePlugin substitui um símbolo em outra fonte por meio da respectiva importação, mas não expõe o símbolo no namespace global. Um exemplo clássico são os plug-ins jQuery. A maioria deles espera jQueryser definida globalmente. Com o, ProvidePluginvocê se certificaria de que o jQuery é uma dependência (por exemplo, carregado antes) e a ocorrência de jQueryem seu código seria substituída pelo equivalente bruto do webpack require('jquery').

Se você tiver scripts externos que dependem do símbolo para estar no namespace global (como digamos um JS hospedado externamente, chamadas de Javascript no Selenium ou simplesmente acessando o símbolo no console do navegador), você deseja usar o expose-loader.

Resumindo: o ProvidePlugin gerencia dependências de tempo de construção para símbolos globais, enquanto expose-loadergerencia dependências de tempo de execução para símbolos globais.

Parece que o windowobjeto está exposto em todos os módulos.

Por que não apenas importar / exigir JQuerye colocar:

window.$ = window.JQuery = JQuery;

Você precisará garantir que isso aconteça antes de solicitar / importar qualquer módulo que faz uso window.JQuery, seja em um módulo de exigência ou no módulo onde está sendo usado.

Isso sempre funcionou para mim. incluindo para webpack 3 window.$ = window.jQuery = require("jquery");

Nenhuma das opções acima funcionou para mim. (e eu realmente não gosto da sintaxe expose-loader). Em vez de,

Eu adicionei a webpack.config.js:

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

Todos os módulos têm acesso através do jQuery através de $.

Você pode expô-lo na janela adicionando o seguinte a qualquer um de seus módulos agrupados por webpack:

window.$ = window.jQuery = $

Atualização para Webpack v2

Instale o expose-loader conforme descrito por Matt Derrick:

npm install expose-loader --save-dev

Em seguida, insira o seguinte snippet em webpack.config.js:

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

(dos documentos expose-loader )

No meu caso funciona

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