【智一面】webpack常见面试问题整理

前端精选面试题：高级开发工程师

1.webpack是什么？

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

2.webpack的配置有哪些？

入口（entry）,出口（output）,mode,plugin,loader；

入口：指示webpack使用哪个模块作为构建其内部依赖图的开始。默认值是：‘./src/index.js’。

出口：告诉webpack在哪里输出它所创建的bundle,以及如何命名这些文件，主要输出文件的默认值是‘./dist/main.js’。

mode:提供 mode 配置选项，告知 webpack 使用相应模式的内置优化,development(开发环境),production(生产环境),none(不使用任何默认优化选项)。

loader：这是 webpack 开箱可用的自带能力，loader 用于转换某些类型的模块（编译兼容）。

plugin：打包优化，资源管理，注入环境变量等（能力扩展）。

3.webpack的作用？

模块打包，编译兼容，能力扩展

模块打包。可以将不同模块的文件打包整合在一起，并且保证它们之间的引用正确，执行有序。利用打包我们就可以在开发的时候根据我们自己的业务自由划分文件模块，保证项目结构的清晰和可读性。

编译兼容。通过webpack的Loader机制，不仅仅可以帮助我们对代码做polyfill，还可以编译转换诸如.less, .vue, .jsx这类在浏览器无法识别的格式文件，让我们在开发的时候可以使用新特性和新语法做开发，提高开发效率。

能力扩展。通过webpack的Plugin机制，我们在实现模块化打包和编译兼容的基础上，可以进一步实现诸如按需加载，代码压缩等一系列功能，帮助我们进一步提高自动化程度，工程效率以及打包输出的质量。

4.模块打包的运行原理？

1、读取webpack的配置参数； 2、启动webpack，创建Compiler对象并开始解析项目； 3、从入口文件（entry）开始解析，并且找到其导入的依赖模块，递归遍历分析，形成依赖关系树； 4、对不同文件类型的依赖模块文件使用对应的Loader进行编译，最终转为Javascript文件； 5、整个过程中webpack会通过发布订阅模式，向外抛出一些hooks，而webpack的插件即可通过监听这些关键的事件节点，执行插件任务进而达到干预输出结果的目的。

5.sourceMap的原理？

提到sourceMap，很多小伙伴可能会立刻想到Webpack配置里边的devtool参数，以及对应的eval，eval-cheap-source-map等等可选值以及它们的含义。除了知道不同参数之间的区别以及性能上的差异外，我们也可以一起了解一下sourceMap的实现方式。 sourceMap是一项将编译、打包、压缩后的代码映射回源代码的技术，由于打包压缩后的代码并没有阅读性可言，一旦在开发中报错或者遇到问题，直接在混淆代码中debug问题会带来非常糟糕的体验，sourceMap可以帮助我们快速定位到源代码的位置，提高我们的开发效率。sourceMap其实并不是Webpack特有的功能，而是Webpack支持sourceMap，像JQuery也支持souceMap。

6.有哪些常用的loader?

raw-loader：加载文件原始内容（utf-8） file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件 (处理图片和字体) url-loader：与 file-loader 类似，区别是用户可以设置一个阈值，大于阈值会交给 file-loader 处理，小于阈值时返回文件 base64 形式编码 (处理图片和字体) source-map-loader：加载额外的 Source Map 文件，以方便断点调试 svg-inline-loader：将压缩后的 SVG 内容注入代码中 image-loader：加载并且压缩图片文件 json-loader 加载 JSON 文件（默认包含） handlebars-loader: 将 Handlebars 模版编译成函数并返回 babel-loader：把 ES6 转换成 ES5 ts-loader: 将 TypeScript 转换成 JavaScript awesome-typescript-loader：将 TypeScript 转换成 JavaScript，性能优于 ts-loader sass-loader：将SCSS/SASS代码转换成CSS css-loader：加载 CSS，支持模块化、压缩、文件导入等特性 style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS postcss-loader：扩展 CSS 语法，使用下一代 CSS，可以配合 autoprefixer 插件自动补齐 CSS3 前缀 eslint-loader：通过 ESLint 检查 JavaScript 代码 tslint-loader：通过 TSLint检查 TypeScript 代码 mocha-loader：加载 Mocha 测试用例的代码 coverjs-loader：计算测试的覆盖率 vue-loader：加载 Vue.js 单文件组件 i18n-loader: 国际化 cache-loader: 可以在一些性能开销较大的 Loader 之前添加，目的是将结果缓存到磁盘里.

7.有哪些常见的plugin？

define-plugin：定义环境变量 (Webpack4 之后指定 mode 会自动配置) ignore-plugin：忽略部分文件 html-webpack-plugin：简化 HTML 文件创建 (依赖于 html-loader) web-webpack-plugin：可方便地为单页应用输出 HTML，比 html-webpack-plugin 好用 terser-webpack-plugin: 支持压缩 ES6 webpack-parallel-uglify-plugin: 多进程执行代码压缩，提升构建速度 mini-css-extract-plugin: 分离样式文件，CSS 提取为独立文件，支持按需加载 (替代extract-text-webpack-plugin) serviceworker-webpack-plugin：为网页应用增加离线缓存功能 clean-webpack-plugin: 目录清理 ModuleConcatenationPlugin: 开启 Scope Hoisting speed-measure-webpack-plugin: 可以看到每个 Loader 和 Plugin 执行耗时 webpack-bundle-analyzer: 可视化 Webpack 输出文件的体积 (业务组件、依赖第三方模块)