一、谈谈你对Webpack的理解
1.1 背景
Webpack 的目标是实现前端项目的模块化,从而更高效地管理和维护项目中的每一个资源。在早期的前端项目中,我们通过文件划分的形式来实现模块化,也就是将每个功能及其相关状态数据各自单独放到不同的 JS 文件中。约定每个文件是一个独立的模块,然后再将这些js文件引入到页面,一个script标签对应一个模块,然后再调用模块化的成员。比如:
但这种模块化开发的弊端也十分明显,模块都是在全局中工作,大量模块成员污染了环境,模块与模块之间并没有依赖关系、维护困难、没有私有空间等问题。随后,就出现了命名空间方式,规定每个模块只暴露一个全局对象,然后模块的内容都挂载到这个对象中。
window.moduleA = {
method1: function () {
console.log('moduleA#method1')
}
}
不过,这种方式也没有解决第一种方式的依赖等问题。接着,有出现了使用立即执行函数为模块提供私有空间,通过参数的形式作为依赖声明。
(function ($) {
var name = 'module-a'
function method1 () {
console.log(name + '#method1')
$('body').ani