⾯试官：说说你对Webpack的理解？解决了什么问题？
⼀、背景
Webpack 最初的⽬标是实现前端项⽬的模块化，旨在更⾼效地管理和维护项⽬中的每⼀个资源
模块化
最早的时候，我们会通过⽂件划分的形式实现模块化，也就是将每个功能及其相关状态数据各⾃单独放到不同的JS ⽂件中
约定每个⽂件是⼀个独⽴的模块，然后再将这些js⽂件引⼊到页⾯，⼀个script标签对应⼀个模块，然后
调⽤模块化的成员
<script src="module-a.js"></script>
<script src="module-b.js"></script>
但这种模块弊端⼗分的明显，模块都是在全局中⼯作，⼤量模块成员污染了环境，模块与模块之间并没有依赖关系、维护困难、没有私有空间等问题
项⽬⼀旦变⼤，上述问题会尤其明显
随后，就出现了命名空间⽅式，规定每个模块只暴露⼀个全局对象，然后模块的内容都挂载到这个对象中
method1: function () {
console.log('moduleA#method1')
}
}
这种⽅式也并没有解决第⼀种⽅式的依赖等问题
再后来，我们使⽤⽴即执⾏函数为模块提供私有空间，通过参数的形式作为依赖声明，如下
// module-a.js
(function ($) {
var name = 'module-a'
function method1 () {
console.log(name + '#method1')
$('body').animate({ margin: '200px' })
}
method1: method1
}
})(jQuery)
上述的⽅式都是早期解决模块的⽅式，但是仍然存在⼀些没有解决的问题。例如，我们是⽤过script标签在页⾯引⼊这些模块的，这些模块的加载并不受代码的控制，时间⼀久维护起来也⼗分的⿇烦
理想的解决⽅式是，在页⾯中引⼊⼀个JS⼊⼝⽂件，其余⽤到的模块可以通过代码控制，按需加载进来
除了模块加载的问题以外，还需要规定模块化的规范，如今流⾏的则是CommonJS、ES Modules
⼆、问题
从后端渲染的JSP、PHP，到前端原⽣JavaScript，再到jQuery开发，再到⽬前的三⼤框架Vue、React、Angular
开发⽅式，也从javascript到后⾯的es5、es6、7、8、9、10，再到typescript，包括编写CSS的预处理器less、scss等
现代前端开发已经变得⼗分的复杂，所以我们开发过程中会遇到如下的问题：
需要通过模块化的⽅式来开发
使⽤⼀些⾼级的特性来加快我们的开发效率或者安全性，⽐如通过ES6+、TypeScript开发脚本逻辑，通过sass、less等⽅式来编写css样式代码
监听⽂件的变化来并且反映到浏览器上，提⾼开发的效率
JavaScript 代码需要模块化，HTML 和 CSS 这些资源⽂件也会⾯临需要被模块化的问题
开发完成后我们还需要将代码进⾏压缩、合并以及其他相关的优化
⽽webpack恰巧可以解决以上问题
三、是什么
webpack 是⼀个⽤于现代JavaScript应⽤程序的静态模块打包⼯具
静态模块
这⾥的静态模块指的是开发阶段，可以被 webpack 直接引⽤的资源（可以直接被获取打包进bundle.js的资源）
当 webpack处理应⽤程序时，它会在内部构建⼀个依赖图，此依赖图对应映射到项⽬所需的每个模块（不再局限js⽂件），并⽣成⼀个或多个 bundle
webpack的能⼒：
「编译代码能⼒」，提⾼效率，解决浏览器兼容问题
「模块整合能⼒」，提⾼性能，可维护性，解决浏览器频繁请求⽂件的问题
「万物皆可模块能⼒」，项⽬维护性增强，⽀持不同种类的前端模块类型，统⼀的模块化⽅案，所有资源⽂件的加载都可以通过代码控制
参考⽂献
--The End--jsp用什么前端框架
系列正在更新：1/10
点击下⽅卡⽚解锁更多
创作不易，星标、点赞、在看 三连⽀持

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。