Webpackベース(4)グローバル変数

グローバル変数導入の問題

npmで導入されたjqueryは、パッケージ化後は閉パッケージ内であるため、windowオブジェクトにマウントされない.

epose-loaderグローバルなloaderを暴露し、loaderをインラインする
pre:前に実行されたloader normal:通常のloaderインラインのloader post:後置のloader
1.インライン方式の使用:

yarn add expose-loader -D

import $ from 'expose-loader?$!jquery'
//  jQuery$     

2.プロファイルでの使用

{
    test: require.resolve('jquery'),
    use: 'expose-loader?$'
}

各ファイルにimport $ from 'jquery'が必要な問題を解決
各モジュールに$オブジェクトを注入する
3.webpackプラグイン

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

window. from 'jquery'`
jqueryがパッケージングされないようにexternalsプロパティ(module,pluginsと同じレベル)を構成します.

 externals: {
        jquery: '$'
    },

まとめ

expose-loader windowに露出

providePluginは各パッケージに$

を提供します.

は、パッケージ化されない方法を導入する.