有关Webpack面试题

一、说一下对Webpack的看法

• Webpack是一个模块打包工具，可以使用它管理项目中的模块依赖，并编译输出模块所需的静态文件。

• 它可以很好地管理、打包开发中所用到的HTML,CSS,JavaScript和静态文件（图片，字体）等，让开发更高效。

• 对于不同类型的依赖，Webpack有对应的模块加载器，而且会分析模块间的依赖关系，最后合并生成优化的静态资源。

二、Webpack的基本功能

• 代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等等

• 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等

• 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载

• 模块合并：在采用模块化的项目有很多模块和文件，需要构建功能把模块分类合并成一个文件

• 自动刷新：监听本地源代码的变化，自动构建，刷新浏览器

• 代码校验：在代码被提交到仓库前需要检测代码是否符合规范，以及单元测试是否通过

• 自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。

三、有哪些常见loader

• file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件 (处理图片和字体)

• url-loader：与 file-loader 类似，区别是用户可以设置一个阈值，大于阈值会交给 file-loader 处理，小于阈值时返回文件 base64 形式编码 (处理图片和字体)

• css-loader：加载 CSS，支持模块化、压缩、文件导入等特性

• style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS

• json-loader: 加载 JSON 文件（默认包含）

• ts-loader: babel-loader：把 ES6 转换成 ES5

• ts-loader: 将 TypeScript 转换成 JavaScript

• less-loader：将less代码转换成CSS

• eslint-loader：通过 ESLint 检查 JavaScript 代码

• vue-loader:加载 Vue单文件组件

四、有哪些常见Plugin

• html-webpack-plugin：根据模板页面生成打包的 html 页面

• uglifyjs-webpack-plugin：不支持 ES6 压缩 ( Webpack4 以前)

• mini-css-extract-plugin: 分离样式文件，CSS 提取为独立文件，支持按需加载

• clean-webpack-plugin: 目录清理

• copy-webpack-plugin: 拷贝文件

• webpack-bundle-analyzer: 可视化 Webpack 输出文件的体积 (业务组件、依赖第三方模块)

五、webpack的loader和plugin的区别

• loader：加载器，用于单纯的转换文件，作用在一个文件上

• plugin：插件，相当于一个扩展器，能够执行更加广泛的任务，丰富了webpack功能，不仅局限于功能的加载