グローバル変数を使う方法 (ProvidePlugin / expose-loader) [Webpack]

グローバル変数を使う方法

ProvidePlugin：グローバル変数として外部に暴露されずに、グローバル変数が定義されているかのようにトランスパイルされる。

expose-loader：グローバル変数としてロードされる。全てのモジュールからグローバル変数としてアクセス可能になる。

参考：

ProvidePlugin not making `$` globally available · Issue #1612 · rails/webpacker – GitHub

webpack.ProvidePlugin is being too smart · Issue #5736 · webpack/webpack – GitHub

ProvidePlugin vs entry vs global import? – Stack Overflow

Define global variable with webpack – Stack Overflow

ProvidePlugin

参考：

webpack の ProvidePlugin で ES Modules を読み込む – Qiita

Webpack で外部ライブラリを読み込む方法 – Qiita

ProvidePlugin で依存するライブラリを autoload する | deadwood

webpack の ProvidePlugin と resolve.alias の使い分け | パパエンジニアのアウトプット帳

ProvidePlugin | Webpack [Official]

Shimming Globals | Webpack [Official]

How can I use webpack.ProvidePlugin ? · Issue #31 · nuxt/nuxt.js – GitHub

expose-loader

参考：

expose-loader | Webpack [Official]

webpack-contrib/expose-loader: Expose Loader – GitHub

expose-loader – npm

imports-loader

モジュール内の特定の変数を別の変数、あるいはモジュール、任意のオブジェクトなどに置き換える。

参考：

TypeScript と webpack と three.js で examples を使う – Qiita

imports-loader | Webpack [Official]

Granular Shimming | Webpack [Official]

webpack-contrib/imports-loader: Imports Loader – GitHub

バンドル外のモジュールを使う

script タグで CDN などから読み込んだモジュールを Webpack のモジュールから使う宣言を行う。

参考：

Externals | Webpack [Official]

jQuery の重複を回避する

参考：

webpack で jQuery の多重ロードを回避する方法 – Qiita

Webpack gives $ is not defined or jQuery is not defined error in console · Issue #4258 · webpack/webpack – GitHub

Managing jQuery plugin dependency in webpack – Stack Overflow

モジュール間で共通の変数を使う

参考：

webpack でモジュール間で共通変数を持ちたい – Qiita

まとめ

参考：

webpack exports-loader, imports-loader, ProvidePlugin, expose-loader | Code Impetus

Consuming Packages | SurviveJS