Exponha o jQuery ao object real da janela com o Webpack

Eu não quero expor o object jQuery para o object de janela global que é acessível dentro do console do desenvolvedor no navegador. Agora na minha configuração do webpack eu tenho as seguintes linhas:

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

Essas linhas adicionam as definições do jQuery a cada arquivo nos 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 na sua configuração:

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

ATUALIZAÇÃO : A partir do webpack 2, você precisa usar o expose -loader ao invés 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 plugins do jQuery. A maioria deles apenas espera que o jQuery seja definido globalmente. Com o ProvidePlugin você se certificaria de que o jQuery é uma dependência (por exemplo, carregado antes) e a ocorrência de jQuery no código deles seria substituída pelo equivalente bruto do webpack require('jquery') .

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

Em suma: o ProvidePlugin gerencia as dependencies de tempo de construção dos símbolos globais, enquanto o expose-loader exposições gerencia as dependencies de tempo de execução dos símbolos globais.

Parece que o object da window está exposto em todos os módulos.

Por que não apenas importar / exigir o JQuery e colocar:

 window.$ = window.JQuery = JQuery; 

no seu módulo de ponto de input?

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

No meu caso funciona

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

Atualização para o Webpack v2

Instale o expose-loader como descrito por Matt Derrick:

 npm install expose-loader --save-dev 

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

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

(dos documentos do expose-loader )