webpack面试题总结

网上对于webpack实习面试的问题有很多，但是自我感觉不是很统一。有些也很难理解。在这篇博客中我将会将这些问题全部打包到一块。附带答案！！！

1 对webpack的理解

我的理解是文件打包及资源处理，当然功能肯定不局限于此。
当我们不打包的时候文件的多而繁杂，所以文件对应的请求也就变多，很大的影响这个用户的体验，
速度也很慢。这样就需要一个东西来整合资源，并且把资源分类，打包减少http请求数，以供线上html正确使用。 资源处理就体现在现在一些浏览器不支持es6模板语法(import)，可是webpack可以将其转换为浏览器是别的代码。相似的情况还有写sass，less，webpack的loader就用上了派场。

2 webpack中常用的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 代码

有哪些常见的Plugin？他们是解决什么问题的？

html-webpack-plugin 功能：创建一个空的html，自动引入打包后输出的所有资源js/css
commons-chunk-plugin：提取公共代码
AutoWebPlugin ：实现多页面应用

如何利用webpack来优化前端性能？（提高性能和体验）

压缩代码。删除多余的代码、注释、简化代码的写法等等方式。可以利用webpack的UglifyJsPlugin和ParallelUglifyPlugin来压缩JS文件， 利用cssnano（css-loader?minimize）来压缩css
利用CDN加速。在构建过程中，将引用的静态资源路径修改为CDN上对应的路径。可以利用webpack对于output参数和各loader的publicPath参数来修改资源路径
删除死代码（Tree Shaking）。将代码中永远不会走到的片段删除掉。可以通过在启动webpack时追加参数–optimize-minimize来实现
提取公共代码。

webpack 和 gulp有什么不同（其实对gulp不是很了解）

gulp强调的是前端开发的工作流程，我们可以通过配置一系列的task，定义task处理的事务（例如文件压缩合并、雪碧图、启动server、版本控制等），然后定义执行顺序，来让gulp执行这些task，从而构建项目的整个前端开发流程。

webpack是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。