模块的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"            }        ]    }};

语法：

模块别名命名使用=，其它变量命名定义，使用=>语法。

多个值：

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模块有效）依赖导入写法。比如：

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

a.js

//var $ = require('jquery');//可以省略咯$('body').prepend('
import loader test
');

因此，你的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。