webpack commonJS模块和全局变量转换

以jquery为例子：jq并不是commonJS模块
jq库的内部并没有export之类的输出语句，使用的是全局变量jQuery/$

jq用法一：直接通过全局变量使用
const $ = windwo.jQuery // 这是一种环境依赖

将全局变量转为commonJS模块

jq用法二：通过webpack的externals配置项，将全局变量包装成 commomJS模块
通过const $ = requier(jquery); // 这是一种模块依赖

externals: {
    jquery: 'jQuery' //key: 模块名 value：全局变量
}

编译代码：后的模块代码

/* 1 */
/***/ (function(module, exports) {

module.exports = jQuery;
}

由于jq使用数量多，可以设置为自动引入模块

new webpack.providePlugin({
    jquery: 'jquery'
})

当模块中使用jquery变量为未赋值的时候将自动引入该模块。
缺点：eslint 会报 未声明变量

逆向：将commonJS模块设置成全局变量

expose-loader(暴露) 将模块中的输出变量添加到全局变量中。
为了解决有一些库并不支持commonJS的引入，必须使用全局变量
例如：bootstrap 必须依赖全局环境中的jQuery变量

用法：
调用一次: require("expose-loader?!jquery");
即可将jquery挂载到全局变量中
或
配置文件用法：

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

require.resolve 是node模块，返回该模块的绝对路径