Webpack常见面试题总结

Posted 2022-01-04 xiangzhihong8

一、谈谈你对Webpack的理解

1.1 背景

Webpack 的目标是实现前端项目的模块化，从而更高效地管理和维护项目中的每一个资源。在早期的前端项目中，我们通过文件划分的形式来实现模块化，也就是将每个功能及其相关状态数据各自单独放到不同的 JS 文件中。约定每个文件是一个独立的模块，然后再将这些js文件引入到页面，一个script标签对应一个模块，然后再调用模块化的成员。比如：

<script src="module-a.js"></script>
<script src="module-b.js"></script>

但这种模块化开发的弊端也十分明显，模块都是在全局中工作，大量模块成员污染了环境，模块与模块之间并没有依赖关系、维护困难、没有私有空间等问题。随后，就出现了命名空间方式，规定每个模块只暴露一个全局对象，然后模块的内容都挂载到这个对象中。

window.moduleA = 
  method1: function () 
    console.log(\'moduleA#method1\')
  

不过，这种方式也没有解决第一种方式的依赖等问题。接着，有出现了使用立即执行函数为模块提供私有空间，通过参数的形式作为依赖声明。

(function ($) 
  var name = \'module-a\'

  function method1 () 
    console.log(name + \'#method1\')
    $(\'body\').ani