Webpack中，如何将一个模块中的方法或者变量暴露为全局变量？

Webpack中，因为ES6模块的引入，代码的复用性与系统性得到了极大的提升。

不过，ES6模块虽然是个好东西，但它还是有一个很大的缺点，那就是如果想要使用模块中定义的变量或者方法，就必须引入相关模块。对于多页面多入口项目文件而言，每一次的引入都将导致输出文件的膨胀，进一步导致项目臃肿，代码的复用性变差。

如果代码的应用场景不多，那倒也没什么，但假如代码在项目的所有网页中都有应用，那就意味着代码在每一个页面都需要引入，这对于项目而言是灾难性的。

对于以上问题，最佳的解决方案便是分别定义一个公共模块[module.js]和一个公共js文件[common.js]。

其中，[module.js] 负责定义需要全局使用的变量，而[common.js]则负责将[module.js] 引入并且将其挂载到浏览器的window对象上，暴露为全局变量。

[module.js] 

//定义一个待转化为全局变量的普通变量
let config = {

    domain : 'abc.com',

    host : 'https://www.abc.com',

}





//定义一个待转化为全局方法的普通方法
let test = function() {
    console.log('这是一个全局方法')

}


//默认导出
export default {

    config,

    test,

}

[common.js]

//默认导入，以对象变量[abc]接收导入的所有属性与方法
import abc from '@/modules/module.js'


//将接收对象变量[abc]挂载到浏览器对象[window]上
window.abc = abc

//通过自定义的全局对象abc，调用test()方法
abc.test()
//打印自定义全局对象abc
console.log(abc)
//通过自定义的全局对象abc，打印自定义的config对象
console.log(abc.config)
//通过自定义的全局对象abc，打印自定义的config对象中定义的host属性
console.log(abc.config.host)

之后，只需要在html页面中引入[common.js]即可

<script src="/dist/common.js"></script>

【注意】

1. 模块的导入与导出最好采用默认方式，这样的好处在于导入导出简单易用，而且通过自定义的[abc]对象作为代理，将大批量自定义的全局变量与方法挂载到[abc]对象上作为属性使用，无需担心变量名或方法与浏览器对象冲突；

2.将接收对象变量[abc]挂载到浏览器对象[window]上（window.abc = abc），是至关重要的一步。如果没有这一步，那么即便[common.js]被html页面引入，其他模块也没办法使用[module.js] 中定义的各种方法与变量，浏览器（控制台）也没办法使用，能使用的只有[common.js]，出了这个文件就完全调动不了；