Webpack面试题总结

说说你对webpack的理解？解决了什么问题？

 webpack最初的目标是实现前端项目模块化，目的在于更高效的管理和维护项目中的每一个资源

模块化：

最早的时候，我们通过文件划分的形式实现模块化，也就是将每个功能及其相关状态数据各自单独放在不同的js文件中

约定每个文件就是一个独立的模块，然后把js文件引入到页面，一个script标签对应一个模块，然后调用模块化的成员，这种的弊端非常的明显，模块都在全局中工作，大量的模块成员污染了环境，模块和模块之间没有依赖关系，维护起来困难，没有私有空间

随着命名空间的出现，规定每个模块只能暴露一个全局对象，然后模块的内容都挂载在这个对象中，但是这种方式也没有解决第一种方式的依赖等问题

再后来，我们使用立即执行函数为模块提供私有空间，通过参数的形式作为依赖声明，但是仍然存在一定的问题，通过script标签引入页面，这些模块的加载不受控制，时间久了维护起来也很困难

理想的解决方案就是在页面引入一个js入口文件，其余用到的模块可以通过代码控制，按需加载起来

问题：

现代前端开发变得越来越复杂，我们在开发过程中可能会遇到的问题：

• 需要通过模块化的方式来开发
• 使用一些高级的特性来加快我们的开发效率或者安全性，比如通过ES6+、TypeScript开发脚本逻辑，通过sass、less等方式来编写css样式代码
• 监听文件的变化来并且反映到浏览器上，提高开发的效率
• JavaScript 代码需要模块化，HTML 和 CSS 这些资源文件也会面临需要被模块化的问题
• 开发完成后我们还需要将代码进行压缩、合并以及其他相关的优化

是什么：

webpack是一个用于现代的javascript应用程序的静态模块的打包工具

静态模块：

静态模块指的是开发阶段，可以被webpack直接引用的资源，可以直接被打包进bundle.js的资源

webpack的能力：

编译代码能力，提高效率，解决浏览器兼容的问题

模块整合能力，提高性能，可维护性，解决浏览器频繁请求文件的问题

万物皆可模块，项目维护性增强，支持不同种类的前端模块类型，统一的模块化方案，所有资源文件都可以通过代码控制

说说webpack的构建流程?

webpack的运行流程是一个串行的过程，他的工作流程就是将各个插件串联起来

在运行过程中会广播时间，插件只需要监听它所关心的事件，就能加入到这条webpack机制中，去改变webpack的运作，使整个系统扩展性良好

从启动到结束会依次执行以下三大步骤：

• 初始化流程：从配置文件和 Shell 语句中读取与合并参数，并初始化需要使用的插件和配置插件等执行环境所需要的参数
• 编译构建流程：从 Entry 发出，针对每个 Module 串行调用对应的 Loader 去翻译文件内容，再找到该 Module 依赖的 Module，递归地进行编译处理
• 输出流程：对编译后的 Module 组合成 Chunk，把 Chunk 转换成文件，输出到文件系统

 

 说说webpack中常见的Loader？解决了什么问题？

loader用于对模块的源代码进行转换，在import或加载模块是预处理文件

webpack做的事情，仅仅是分析出各种模块的依赖关系，然后形成资源列表，最终打包生成指定的文件中

在webpack中，任何文件都是模块，不仅仅是js文件，默认情况下，在遇到import或者require加载模块的时候，webpack只支持js和json文件打包

 像css、sass、png等这些类型的文件的时候，webpack则无能为力，这时候就需要配置对应的loader进行文件内容的解析、

关于配置loader的方式有三种：