WebPack面试题

1.webpack与grunt，gulp的不同？

Grunt 、 Gulp 是基于任务运行的工具：

它们会自动执行指定的任务，就像流水线，把资源放上去然后通过不同插件进行加工，它们包含活跃的 社区，丰富的插件，能方便的打造各种工作流。

Webpack 是基于模块化打包的工具 :

自动化处理模块 ,webpack 把一切当成模块，当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph) ，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。

因此这是完全不同的两类工具 , 而现在主流的方式是用 npm script 代替 Grunt 、 Gulp,npm script 同样可以打造任务流

2.webpack，rollup，parcel优劣？

• webpack适⽤于⼤型复杂的前端站点构建: webpack有强⼤的loader和插件⽣态,打包后的⽂件实际上就是⼀个⽴即执⾏函数，这个⽴即执⾏函数接收⼀个参数，这个参数是模块对象，键为各个模块的路径，值为模块内容。⽴即执行函数内部则处理模块之间的引⽤，执⾏模块等,这种情况更适合⽂件依赖复杂的应⽤开发.
• rollup适⽤于基础库的打包，如vue、d3等: Rollup 就是将各个模块打包进⼀个⽂件中，并且通过 Tree-shaking 来删除⽆⽤的代码,可以最⼤程度上降低代码体积,但是rollup没有webpack如此多的的如代码分割、按需加载等⾼级功能，其更聚焦于库的打包，因此更适合库的开发.
• parcel适⽤于简单的实验性项⽬: 他可以满⾜低⻔槛的快速看到效果,但是⽣态差、报错信息不够全⾯都是他的硬 伤，除了⼀些玩具项⽬或者实验项⽬不建议使⽤

3.有哪些常见的Loader？

• file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件
• url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去
• source-map-loader：加载额外的 Source Map 文件，以方便断点调试
• image-loader：加载并且压缩图片文件
• babel-loader：把 ES6 转换成 ES5
• css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
• style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。
• eslint-loader：通过 ESLint 检查 JavaScript 代码

4.有哪些常见的Plugin？

• define-plugin：定义环境变量
• html-webpack-plugin：简化html文件创建
• uglifyjs-webpack-plugin：通过 UglifyES 压缩 ES6 代码
• webpack-parallel-uglify-plugin: 多核压缩,提高压缩速度
• webpack-bundle-analyzer: 可视化webpack输出文件的体积
• mini-css-extract-plugin: CSS提取到单独的文件中,支持按需加载

5.分别介绍bundle，chunk，module是什么?

• bundle：是由webpack打包出来的文件
• chunk：代码块，一个chunk由多个模块组合而成，用于代码的合并和分割
• module：是开发中的单个模块，在webpack的世界，一切皆模块，一个模块对应一个文件，