webpack中imports-loader,exports-loader,expose-loader的區別

Webpack有幾個和模塊化相關的loader，imports-loader,exports-loader,expose-loader，比較容易混淆。今天，咱們來理一理。

imports-loaders

文檔介紹的是：用於向一個模塊的做用域內注入變量（Can be used to inject variables into the scope of a module.）,官方的文檔老是言簡意賅可是不太好懂。咱們來舉個例子。
例子完整的代碼能夠點這裏
jqGreen.js文件裏僅一行代碼

//沒有模塊化
$('#box').css('color','green');

index.js文件也只有一行代碼

require('./jqGreen');

咱們的配置文件中，是把index.js做爲入口文件的。

{
    entry:{
    index:'./src/js/index.js'
    }
}

注意，咱們並無引入jquery。因此運行的結果是$ is not defined。

可是若是咱們稍微修改一下jqGreen的引入方式，就能很輕鬆的解決這個問題。
index.js文件

require('imports?$=jquery!./jqGreen');

固然，這個能運行以前，咱們要npm install imports-loader一下。上面代碼，把變量$注入進模塊jqGreen.js。同時，咱們指定了變量$=jquery。等因而在jqGreen.js文件的最頂上，加上了var $=require('jquery')。這樣，程序就不會報$ is not defined的錯誤了。

exports-loader

exports有導出的意思，這讓咱們猜想它有從模塊中導出變量的功能。實際狀況大體如此。咱們來看個小例子。
例子的完整代碼在 這裏
Hello.js文件中僅有一個方法，直接綁定在全局變量window上面。

window.Hello = function(){
    console.log('say hello.');
}

而後咱們在index.js文件裏去引用這個Hello.js:var hello = require('./Hello.js');。這樣引用的結果是變量hello是undefined。由於咱們在Hello.js文件裏沒有寫module.exports=window.Hello，因此index.js裏咱們require的結果就是undefined。這個時候，exports-loader就派上用場了。咱們只用把index.js的代碼稍微改動一下：var hello = require('exports?window.Hello!./Hello.js');，這個時候，代碼就能正確的運行了。變量hello就是咱們定義的window.hello啦。
var hello = require('exports?window.Hello!./Hello.js');這行代碼，等於在Hello.js里加上一句module.exports=window.Hello，因此咱們才能正確的導入。

expose-loader

把一個模塊導出並付給一個全局變量。文檔裏給了一個例子：

require("expose?libraryName!./file.js");
// Exposes the exports for file.js to the global context on property "libraryName".
// In web browsers, window.libraryName is then available.

例子中的註釋是說把file.js中exports出來的變量付給全局變量"libraryName"。假如file.js中有代碼module.exports=1，那麼require("expose?libraryName!./file.js")後window.libraryName的值就爲1（咱們這裏只討論瀏覽器環境）。
我這裏還有一個稍稍複雜點的從一個umd模塊的文件裏導出到全局變量的例子，有興趣的同窗點擊這裏。