1.gulp/grunt 与 webpack的区别

Grunt/Gulp属于一类的都是打包构建工具，Webpack 是目前最热门的前端资源模块化管理和打包工具；
gulp基于任务和流；
webpack是基于入口文件，根据关系依赖引入文件，根据依赖图进行打包。

2.常见的Loader

1. file-loader文件统一输出到指定文件夹，HTML中通过相对路径引用文件；
2. url-loader文件很小的情况下以 base64 的方式把文件内容注入到代码中；
3. babel-loader把 ES6 转换成 ES5；
4. css-loader加载 CSS；
5. style-loader把 CSS 代码注入到 JavaScript 中；
6. eslint-loader通过 ESLint 检查 JavaScript 代码；

3.Loader和Plugin不同

• loader意思作为加载解析文件作用，实现的功能比较小，默认webpack仅可以打包json和js语法，通过安装loader可以加载识别更多文件。plugin是插件，更为灵活实现的功能更广泛；
• loader使用前需要安装，不需要引入可直接在module.rules中配置。plugin则需要安装，引入模块，使用时需要new 实例对象；

4.webpack的构建流程？

1. 初始化参数，从配置文件和 Shell 语句中读取与合并配置参数；
2. 开始编译，通过配置参数初始化 Compiler 对象，加载配置的插件，执行对象的 run 方法开始执行编译；
3. 确定入口，根据配置中的 entry 找出入口文件；
4. 编译模块，入口文件出发，调用所有配置的 Loader 对模块进行翻译；
5. 完成模块编译，使用 Loader 翻译完所有模块后得到模块之间的依赖关系图；
6. 输出资源，根据入口和模块之间的依赖关系，引入模块组合成为Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，此处可以修改输出文件；
7. 输出完成，确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统；

5.理解webpack的HMR热更新

Hot Module Replacement（以下简称 HMR）是 webpack 发展至今引入的最令人兴奋的特性之一 ，当你对代码进行修改并保存后，webpack 将对代码重新打包，并将新的模块发送到浏览器端，浏览器通过新的模块替换老的模块，这样在不刷新浏览器的前提下就能够对应用模块进行更新。

基本实现原理大致这样的，构建 bundle 的时候，加入一段 HMR runtime 的 js 和一段和服务沟通的 js 。文件修改会触发 webpack 重新构建，服务器通过向浏览器发送更新消息，浏览器通过 jsonp 拉取更新的模块文件，jsonp 回调触发模块热替换逻辑。

6.理解webpack来优化前端性能

开发环境优化，DevServer开发工具优化，实现HMR热替换，采用多线程编译；
生产环境优化，代码分隔配合CDN引入资源，使用ES6语法引入，实现Tree shaking效果，通过压缩代码缩小体积，通过source-map进行源文件和资源文件的映射方式，内联方式可以提高性能；