webpack shimmimg

模塊的shim其實在webpack中能夠使用imports-loader和exports-loader來完成。

1.imports-loader

顧名思義，導入模塊的處理器。它能夠作的事情包括：

• 前置插入模塊依賴，配置前置（至關於插入各類類型數據）

• this 注入，AMD define 禁止

所以，當咱們使用了一些jquery插件的時候，這些插件全局依賴了jquery（代碼中顯式調用$）,直接導入jquery插件會報錯，找不到$啊。

解決方案就是，將var $ = require('jquery') 前置插入到jquery插件中。

module.exports = {
    ...
    module: {
        loaders: [
            {
                test: require.resolve("some-module"),
                loader: "imports-loader?$=jquery"
            }
        ]
    }
};

語法：

加載器查詢值	含義
angular	var angular = require("angular");
$=jquery	var $ = require("jquery");
define=>false	var define = false;
config=>{size:50}	var config = {size:50};
this=>window	(function () { ... }).call(window);

模塊別名命名使用=，其它變量命名定義，使用=>語法。

多個值：

module.exports = {
    ...
    module: {
        loaders: [
            {
                test: require.resolve("some-module"),
                loader: "imports-loader?$=jquery,angular,config=>{ data: ''},this=>window,define=>false"
            }
        ]
    }
};

AMD 禁用

有不少模塊在使用 CommonJS 前會進行 define 函數的檢查。自從 webpack 兩種格式均可以使用後，在這種場景下默認使用了 AMD 可能會形成某些問題（若是接口的實現比較古怪）

define=>false

與ProvidePlugin的區別

ProvidePlugin主要用來省略模塊（只對AMD和CMD模塊有效）依賴導入寫法。好比：
webpack.config.js

var provide = new webpack.ProvidePlugin({
    $: 'jquery',//key值爲暴露全局的變量名，val值爲模塊名
    jQuery: 'jquery' 
});
config.plugins.push(provide)

a.js

//var $ = require('jquery');//能夠省略咯
$('body').prepend('<p style="font-size:30px;color:#333">import loader test</p>');

所以，你的jquery文件必須支持AMD或者CMD的模塊規範，纔可以使用ProvidePlugin。

2.exports-loader

主要用來將全局模塊導出爲commonjs格式。

module.exports = {
  module: {
    rules: [{
      test: require.resolve("some-module"),
      use: 'exports-loader?file,parse=helpers.parse' //file=file,parse=helper.parse簡寫
      // 在文件的源碼中加入如下代碼
      //  exports["file"] = file;
      //  exports["parse"] = helpers.parse;
    }]
  }
};

3.expose-loader

expose-loader 用來把模塊（CMD/AMD/UMD）暴露到全局變量。

注意: 模塊必須在你的 bundle 中被 require() 過，不然他們將不會被暴露。

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

總結：

1.imports-loader,ProvidePlugin,expose-loader三者之間功能比較雷同,可是expose-loader須要顯式require。
2.exports-loader主要用於導出commonjs模塊。