什么是webpack？

Webpack 是一个基于模块化打包的工具，自动化处理模块，webpack处理应用程序的时候，会递归一个依赖关系图，包含应用需要的所有模块，然后把这些模块打包成一个或多个包

常见的Loader

Loader的顺序是从右向左执行的，因为webpack使用了compose这样的函数是编程方式

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

bable-loader：把es6转换成es5

Css-loader：加载css，支持代码化，压缩，文件导入等特性

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

eslint-loader：通过ESLint检查js代码的规范

Webpack有哪些常用的Plugin

define-plugin：定义环境变量

html-webpack-plugin：简化html文件的创建

uglifyjs-webpack-plugin：通过uglifyJS来压缩js代码

webpack-parallel-uglify-plugin：多核压缩，提高压缩的速度

webpack-bundle-analyzer：可视化的webpack输出的体积

mini-css-extract-plugin：把css单独提取出来，支持按需加载

Loader和Plugin的不同？

作用不同：

Loader就是加载器的意思，webpack原生只能解析js文件，想要打包其他文件就要安装响应的插件，简单来说就是loader让webpack有了加载和解析非js文件的能力；

Plugin就是插件的意思，拓展webpack的功能；

用法不同：

Loader在moudle.rules里面配置，类型为数组，每一项都是一个object对象，像test文件类型的匹配，以及loader是对loader类型的选择，还有options参数

Plugin在plugin中单独配置，类型是数组，每一项都是一个plugin实例，参数都通过构造函数传入

webpack的构建流程？

根据配置，识别入口文件。从entry出发，针对每个模块串行调用对应的loader，在找到这个模块依赖的模块，进行递归编译处理，编译后的模块组合成了chunk，把chunk转换成文件，通过output输出文件

如何提高webpack的打包速度？

优化loader：首先想到的就是bable，他可以吧es6的语法转译为es5的语法，配置的时候可以通过test进行匹配文件的配置，以及可以通过include设置去查的路径，和exclude设置不去查的路径。

HappyPack：因为打包的时候是单线程的，所以打包下去会一个一个等待上一个任务完成之后再进行下一个，可以通过HappyPack把同步进行的打包转换为并行执行，这样就会加快打包速度

DllPlugin:可以将特定的类库提前打包引入，节约打包时间

代码压缩：UglifyJS来压缩代码，但这是单线程运行的，可以使用webpack-parallel-uglify-plugin来并行执行UglifyJS，从而提高效率

Module.noParse：确定一个文件下没有对应的依赖，就可以使用该属性让webpack不扫描该文件

如何减少webpack打包体积？

按需加载：按需加载，每个路由单独打包一个文件，不单单路由可以，像loadash这样的大型库同样可以使用这个功能

Scope Hoisting：会分析出模版之间的依赖关系，尽可能的把代码合并到一起

Tree ShaKing：可以实现删除项目中未使用的代码

如何用webpack来优化前端性能？

压缩代码：UglifyJS进行代码的压缩，使用css-loader压缩css代码

CND加速：将静态的资源用cdn加速的方式引入

Tree ShaKing：可以实现删除项目中未使用的代码

Code Splitting：将代码按照路由或组件分块，做到按需加载

提取第三方公共组件库：splitchunksplugin来进行公共模块的抽取

如何提高webpack的构建速度？

1.多入口情况下，使用commonsChunkPlugin来提取公共代码

2.通过externals配置来提取常用库

3.DllPlugin:可以将特定的类库提前打包引入，节约打包时间

4.HappyPack：通过HappyPack把单线程改成多个任务并行执行，加快编译速度

5.用webpack-parallel-uglify-plugin来并行执行UglifyJS

6.使用Tree ShaKing和Code Splitting来进行无用代码的删除