标签：

1.Webpack是什么？

Webpack是一个模块打包工具，在Webpack里一切文件皆模块。通过loader转换文件，通过plugin注入钩子，最后输出由多个模块组合的文件。Webpack专注构建模块化项目。
Webpack可以看作是模块打包机：它做的工作是，分析你的项目布局，找到JavaScript模块以及其他一些不能被浏览器直接运行的扩展语音(如：Scss,TypeScript等)，并将其打包为合适的格局以供浏览器使用。

2. Webpack与Grunt、Gulp的差别？

Grunt/Gulp是一种能够优化前端开发流程的工具，而Webpack是一种模块化的解决方案。

2.1 事情方法差别：

Grunt/Gulp的事情方法是：在一个配置文件中，指明某些文件进行类似编译/组合/压缩等任务的具体法式，之后工具可以自动帮你完成这些任务

Webpack的事情方法是：把项目看成是一个整体，通过指定的入口文件，Webpack会从这个入口文件开始找到项目所有的依赖文件，然后使用loader措置惩罚惩罚它们，最后打包成一个或多个浏览器能够识另外JavaScript文件

2.2 构建思路差别

Grunt/Gulp需要将整个前端构建过程拆分成多个task，合理控制所有task的挪用关系

Webpack需要界说好入/出口，并需要清楚对付差别类型资源应该用什么loader解析编译

Grunt/Gulp是基于任务和流(task和stream)的。类似jQuery,找到一个(或一类)文件，对其做一系列的链式操纵，更新流上的数据，整条链式操纵组成了一个任务，多个任务就组成了整个Web的构建流程。
Webpack是基于入口的。Webpack会自动的递归解析入口所需要加载的所有资源文件，然后用差此外loader来措置惩罚惩罚差此外文件，用pulgin扩展Webpack成果。

2.3 配景常识差别

Grunt/Gulp更像是后端开发者的思路，需要对整个流程洞若观火。Webpack更倾向于前端开发者的思路。

3. Webpack的构建流程是怎么样的？

Webpack的运行流程是一个串行的过程，从启动到结束会依次执行以下法式：

初始化参数：从配置文件和shell语句中读取与合并参数，得到最终参数；

开始编译：用上一步得到的参数初始化Compiler东西，加载所有配置的插件，执行东西的run要领开始执行编译；

确定入口：按照配置中的entry找出所有的入口文件；

编译模块：从入口文件出发，挪用所有配置的loader对模块进行编译。再找出该模块依赖的模块，再递归本法式，直到所有入口依赖的文件都颠末本法式的措置惩罚惩罚；

完成模块编译：在颠末第四个法式使用loader编译完所有模块后，得到每个模块被编译后的最终内容以及它们之间的依赖关系；

输出资源：按照入口和模块之间的依赖关系，组装成一个个包罗多个模块的Chunk，再把每个Chunk转换成一个单独的文件插手到输出列表，这步是可以改削输出内容的最后机会；

输出完成：在确认好输出内容后，按照配置确定输出的路径和文件名，把文件内容写进到文件系统中；

在以上过程中，Webpack会在特定的的时间点广播特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑。并且插件可以挪用Webpack供给的API转变Webpack的运行功效。

4. 分袂介绍bundle，chunk，module是什么？

bundle：由Webpack打包出来的文件

chunk：代码块，webpack在进行模块的依赖分析的时候，代码支解出来的代码块

module：是开发中的单个模块，在Webpack中，一切皆模块，一个模块对应一个文件

5. 什么是Loader?什么是Plugin?

loader: 模块转换器，用于对模块的源代码进行转换

plugin: 自界说webpack打包过程的方法，插件含有apply属性的JavaScript东西，apply属性会被webpack compiler挪用，并且compiler东西可以在整个编译生命周期内访谒

6. loader和plugin有哪些差别？ 6.1 差此外感化

loader直译为“加载器"，Webpack将一切文件视为模块，但是Webpack原生只能解析JavaScript和JSON类型文件。如果想加载解析其他类型文件，就会用到loader。所以loader是让Webpack拥有加载和解析非JavaScript文件的能力

plugin直译为”插件“，plugin可以扩展Webpack的成果，让Webpack具有更多的灵活性。在Webpack运行的生命周期中会广播许多事件，plugin可以监听这些事件，在合适的时机通过Webpack供给的API转变输出功效

6.2 差此外用法

loader在module rules中配置，也就说它作为模块解析法则存在。类型为Array，每一项都是一个Object，里面描述了什么类型的文件(test)，使用什么加载(loader)和使用的参数(options)

plugin单独在plugins中单独配置。类型为Array，每项都是一个plugin的实例，参数是通过结构函数传入

7. 有哪些常见的Loader？

file-loader: 将文件输出到一个文件夹中，在代码中通过相对路径(url)去引用输出的文件

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

image-loader: 加载并压缩图片文件

babel-lodader: 将ES6转成ES5

css-loader: 加载CSS，撑持模块化/压缩/文件导入等特性

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

eslint-loader: 通过ESlint查抄JavaScript代码

8. 有哪些常见的Plugin？

define-plugin: 界说环境变量

html-webpack-pulgin: 生成创建html入口文件，并引用对应的外部资源

uglifyjs-plugin: 通过Uglifyjs压缩JavaScript代码

mini-css-extract-plugin: 疏散CSS文件

clean-webpack-plugin: 删除打包文件

happypack: 实现多线程加速编译

9. Tree Shaking

为了使用tree shaking，需要满足以下条件：

使用ES2015语法(即import和export)

在项目package.json文件中，，添加sideEffects入口

引入一个能够删除未引用代码(dead code)的压缩工具(minifier)(例如：UglifyJSPlugin)

9.1 将文件符号为无副感化(side-effect-free)

这种方法是通过package.json的sideEffects属性来实现的。

{ "sideEffects": false }