Shimming解决的问题
webpack 编译器(compiler)能够识别遵循 ES2015 模块语法、CommonJS 或 AMD 规范编写的模块。然而,一些第三方的库(library)可能会引用一些全局依赖(例如 jQuery 中的 $)。这些库也可能创建一些需要被导出的全局变量。这些“不符合规范的模块”就是 shimming 发挥作用的地方。
作用一:shimming 全局变量
要实现这些全局变量,需要使用 ProvidePlugin 插件。
使用 ProvidePlugin 后,能够在通过 webpack 编译的每个模块中,通过访问一个变量来获取到 package 包。如果 webpack 知道这个变量在某个模块中被使用了,那么 webpack 将在最终 bundle 中引入我们给定的 package。
const webpack = require('webpack')
plugins: [
new webpack.ProvidePlugin({
_: 'lodash'
})
],
本质上,我们所做的,就是告诉 webpack……
如果你遇到了至少一处用到 _变量的模块实例,那请你将 lodash package 包引入进来,并将其提供给需要用到它的模块。