关于webpack面试题总结

最近在读《webpack深入浅出》，总结一下webpack关于面试常见的问题，分享出来，希望可以帮助更多小伙伴在找到心爱的工作和期待的薪水。

一.常见的构建工具有哪些？他们各自优缺点？为什么选择了webpack？

Grunt、Gulp、Fis3、Rollup、Npm Script、webpack

<1>Grunt的优点是：

• 灵活，它只负责执行我们定义的任务；

• 大量的可复用插件封装好了常见的构建任务。

Grunt的缺点是：

集成度不高，要写很多配置后才可以用，无法做到开箱即用。Grunt相当于进化版的NpmScript，它的诞生其实是为了弥补NpmScript的不足。

<2>Gulp的优点是： 好用又不失灵活，既可以单独完成构建，也可以和其他工具搭配使用。

其缺点： 和Grunt类似，集成度不高，要写很多配置后才可以用，无法做到开箱即用。

<3> Fis3的优点是：集成了各种Web开发所需的构建功能，配置简单、开箱即用。

其缺点是 目前官方己经不再更新和维护，不支持最新版本的T、fode

<4>Webpack的优点是：• 专注于处理模块化的项目，能做到开箱即用、一步到位：

• 可通过Plugin扩展，完整好用又不失灵活；

• 使用场景不局限于Web开发

• 社区庞大活跃，经常引入紧跟时代发展的新特性，能为大多数场景找到已有的开源扩展：

• 良好的开发体验。

Webpack的缺点是:只能用于采用模块化开发的项目。

<5> Rollup是在Webpack流行后出现的替代品，讲述差别：：
• Rollup生态链还不完善，体验不如Webpack;

• Rollup的功能不如Webpack完善，但其配置和使用更简单：

• Rollup不支持CodeSpliting，但好处是在打包出来的代码中没有Webpack那段模块的加载、执行和缓存的代码。

Roll up在用于打包JavaScript库时比Webpack更有优势，因为其打包出来的代码更小、

深入浅出Webpack更快。

缺点：但它的功能不够完善，在很多场景下都找不到现成的解决方案

<6>Npm Script的优点 是内置，无须安装其他依赖。
其缺点 是功能太简单，虽然提供了pre和post两个钩子，但不能方便地管理多个任务之间的依赖

为啥选择webpack？
大多数团队在开发新项目时会采用紧跟时代的技术，这些技术几乎都会采用“模块化＋新语言＋新框架”，Webpack可以为这些新项目提供一站式的解决方案：
• Webpack有良好的生态链和维护团队，能提供良好的开发体验并保证质量：

• Webpack被全世界大量的Web开发者使用和验证，能找到各个层面所需的教程和经验分享。

二.有哪些常见的Loader？你用过哪些Loader？

1. 加载文件
• raw-loader ：将文本文件的内容加载到代码中

• file-loader ：将文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件

• url-loader ：和 file-loader 类似，但是能在文件很小的情况下以 base64 方式将文件的内容注入代码中

• source-map-loader ：加载额外的 SourceMap 文件，以方便断点调试

• svg-inline-loader ：将压缩后的SVG 内容注入代码中

• node-loader ：加载 Node.js 原生模块的 .node 文件

• image-loader ：加载并且压缩图片文件

• json-loader：加载 JSON 文件

• yaml-loader：加载 YAML 文件

2. 编译模版
• pug-loader ：将 Pug 模版转换成 JavaScript 函数井返回。

• handlebars-loader：将 Handlebars模版编译成函数并返回

• s-loader ：将 EJS 模版编译成函数井返回

• haml-loader：将 HAML 代码转换成 HTML

• markdown-loader 将 Markdown 文件转换成 HTML

3.转换脚本语言
• babel-loader ：将 ES6 转换成 ES5 

• ts-loader ：将 TypeScript 转换成 JavaScript,

• awesome-typescript-loader: Type Script 转换成 JavaScript ，性能要比 ts-loader好

• coffee-loader 将 CoffeeScript换成 JavaScript

4.转换样式文件
• css-loader ：加载 css ，支持模块化、压缩、文件导入等特性。

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

• sass-loader ：将 SCSS SASS 代码转换成 css 

• postcss-loader ： 扩展 css 语法，使用css 

• less-loader ： Less 代码转换成 css代码

• stylus-loader ：将 Stylu 代码转换成 css 码。

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

• tslint-loader ：通过 TSLint peScript
代码

• mocha-loader ：加载 Mocha 测试
用例的代码

• coverjs-loader ： 计算测试的覆盖率。

6.其他 Loader
• vue-loader ：加载 Vue. 单文件组件

• i18n-loader：加载多语言版本，支持国际化

• ignore-loader ：忽略部分文件

• ui-component-loader：按需加载
UI 组件库，例如在使用 antdUI 组件库时，不会因为只用到了 Button 组件而打包进所有的组件

3.有哪些常见的Plugin？你用过哪些Plugin？

1.用于修改行为
• define-plugin ：定义环境变量

• context-replacement-plugin : 修改 require 语句在寻找文件时的默认行为

• ignore-plugin  ：用 于忽略部分文件

2.用于优化
• commons-chunk-plugin ：提取公共代码。

• extract-text-webpack-plugin ：提取 JavaScript 中的 css 代码到单独的文件中

• prepack-webpack-plugin  ：通过Facebook Prepack 优化输出的 JavaScript 代码的性能

• uglifyjs-webpack-plugin ：通过 UglifyES 压缩 S6 代码

• webpack-parallel-uglify-plugin ：多进程执行 glifyJS 代码压缩，提升构建的速度

• imagemin-webpack-plugin : 压缩图片文件。

• webpack-spritesmith ：用插件制作碧图

• ModuleConcatenationPlugin : 开启 WebpackScopeHoisting 功能

• dll-plugin  ：借鉴 DDL 的思想大幅度提升构建速度

• hot-module-replacem nt-plugin 开启模块热替换功能。

3. 其他 Plugin 
• serviceworker-webpack-plugin ：为网页应用增加离钱缓存功能

• stylelint-webpack-plugin ： stylelint集成到项目中，

• i18n-webpack-plugin ： 使网页支持国际化。

• provide-plugin ： 从环境中提供的全局变量中加载模块，而不用导入对应的文件。

• web-webpack-plugin ： 可方便地为单页应用输出 HTML ，比 html-webpack-plugin 好用

4.那你再说一说Loader和Plugin的区别

Loader ：模块转换器，用于将模块的原内容按照需求转换成新内容。
Plugin ：扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑，来改变构建结
果或做我们想要的事情。

5.Webpack构建流程简单说一下

初始化参数 从配置文件和 Shell 语句中读取与合并参数，得出最终的参数
• 开始编译：用上 步得到的参数初始 Co er 对象，加载所有配置的插件，通
过执行对象的 run 方法开始执行编译
• 确定入口 根据配置中的 ntry 找出所有入口文件
• 编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出
模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
• 完成模块编译 在经过第 步使用 Loader 翻译完所有模块后， 得到了每个模块被
翻译后的最终内容及它们之间的依赖关系。
• 输出资源：根据入口和模块之间的依赖关系，组装成 个个包含多个模块的 Chunk,
再将每个 Chunk 转换成 个单独的文件加入输出列表中，这是可以修改输出内容
的最后机会
• 输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，将文件的内
容写入文件系统中。

6.使用webpack开发时，你用过哪些可以提高效率的插件

webpack-dashboard：可以更友好的展示相关打包信息。
webpack-merge：提取公共配置，减少重复配置代码
speed-measure-webpack-plugin：简称 SMP，分析出 Webpack 打包过程中 Loader 和 Plugin 的耗时，有助于找到构建过程中的性能瓶颈。
size-plugin：监控资源体积变化，尽早发现问题
HotModuleReplacementPlugin：模块热替换

import { readFile} from 'fs';
import react from 'react';

// 导出
export function hello(){};
export default{...}