WebpackでjQueryを実際のWindowオブジェクトに公開する

jQueryオブジェクトを、ブラウザーの開発者コンソール内からアクセスできるグローバルウィンドウオブジェクトに公開したい。今、私のwebpack設定には次の行があります：

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

これらの行は、私のwebpackモジュールの各ファイルにjQuery定義を追加します。しかし、プロジェクトをビルドして、次のように開発者コンソールでjQueryにアクセスしようとすると、

window.$;
window.jQuery;

これらのプロパティは未定義であると言っています...

これを修正する方法はありますか？

エクスポーズローダーを使用する必要があります。

npm install expose-loader --save-dev

必要なときにこれを行うことができます。

require("expose?$!jquery");

またはあなたの設定でこれを行うことができます：

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

更新：webpack 2以降では、exposeの代わりにexposed -loaderを使用する必要があります：

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

ProvidePluginは、それぞれのインポートを通じて別のソースのシンボルを置き換えますが、グローバルネームスペースでシンボルを公開しません。典型的な例はjQueryプラグインです。それらのほとんどは、jQueryグローバルに定義されることを期待しています。を使用するProvidePluginと、jQueryが依存関係（たとえば、以前にロードされたもの）であることを確認しjQuery、それらのコード内のの出現を、と同等のwebpack rawで置き換えrequire('jquery')ます。

シンボルに依存してグローバル名前空間にある外部スクリプトがある場合（たとえば、外部でホストされているJS、JavascriptがSeleniumを呼び出す、または単にブラウザーのコンソールでシンボルにアクセスするとします）、expose-loader代わりに使用します。

つまり、ProvidePluginはグローバルシンボルへのビルド時の依存関係をexpose-loader管理するのに対し、はグローバルシンボルへの実行時の依存関係を管理します。

windowオブジェクトがすべてのモジュールで公開されているように見えます。

なぜインポート/要求JQueryして配置しないのですか？

window.$ = window.JQuery = JQuery;

window.JQuery必要なモジュールまたはそれが使用されているモジュールのいずれかで、を使用するモジュールを要求/インポートする前に、これが発生することを確認する必要があります。

これは常に私のために働いた。webpack 3を含む window.$ = window.jQuery = require("jquery");

上記のどれも私にとってはうまくいきませんでした。（そして私はエクスポーズローダーの構文が本当に好きではありません）。代わりに、

私はwebpack.config.jsに追加しました：

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

すべてのモジュールがjQueryから$を介してアクセスできます。

webpackにバンドルされているモジュールのいずれかに以下を追加することで、ウィンドウに公開できます。

window.$ = window.jQuery = $

Webpack v2のアップデート

Matt Derrickの説明に従って、露出ローダーをインストールします。

npm install expose-loader --save-dev

次に、次のスニペットをに挿入しますwebpack.config.js。

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

（expose-loader docsから）

私の場合はうまくいきます

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