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模块。