webpack是什么？
webpack是一个模块打包工具，他可以分析项目结构，可以找到javascript模块以及其他一些浏览器不能运行的拓展语言（Scss，Typescript等），并将其打包为合适的格式以供浏览器使用。
为什么要用webpack？
目前前端有非常多好的方法和工具，例如模块化，Typescript，scss/less等css预处理器；但利用它们开发的文件往往需要额外的处理才能让浏览器识别，而手动处理非常繁琐，webpack可以帮助我们实现这些工作。
webpack与gulp以及grunt区别？
gulp/grunt是一种能够优化前端开发流程的工具，而webpack是一种模块化的解决方案。
grunt/gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译、组合、压缩等步骤，这个工具之后可以自动帮你完成这些任务。
webpack的工作方式是：把项目当作一个整体，通过一个给定的主文件，webpack从这个文件开始找到项目的所有依赖文件，使用loader处理它们，最后打包成一个浏览器可识别的javascript文件。
loader和plugin区别？
loader，它是一个转换器，将A文件进行编译成B文件，比如：将A.less转换为A.css，单纯的文件转换过程。
plugin是一个扩展器，它丰富了webpack本身，针对是loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，执行广泛的任务。
webpack常用的loader有哪些？
- 样式：style-loader、css-loader、less-loader、sass-loader等
- 文件：raw-loader、file-loader 、url-loader等
- 编译：babel-loader、coffee-loader 、ts-loader等
- 校验测试：mocha-loader、jshint-loader 、eslint-loader等
sass-loader转化sass为css文件。
style-loader将创建一个style标签将css文件嵌入到html中。
css-loader处理其中的@import和url()。
bable-loader还有ts-loader等可以将特定文件格式转成js模块、将其他语言转化为js语言和编译下一代js语言。
file-loader可以复制和放置资源位置，并可以指定文件名模板。
data-loader可以将文件转换成内敛Data Url的方式，减少请求。
raw-loader可以将文件已字符串的形式返回。
webpack常用的plugin有哪些？
UglifyJsPlugin压缩和混淆代码。
CommonsChunkPlugin，提高打包效率，将第三方库和业务代码分开打包。
ProvidePlugin，自动加载模块，代替require和import。
html-webpack-plugin，可以根据模板自动生成html代码，并自动引用css和js文件。
HotModuleReplacementPlugin，热更新。
happypack，通过多进程模型，来加速代码构建。
tree shaking，去除没有使用到的代码。
如何写一个plugin呢？
- 编写一个JavaScript命名函数。
- 在它的原型上定义一个apply方法。
- 指定挂载的webpack事件钩子。
- 处理webpack内部实例的特定数据。
- 功能完成后调用webpack提供的回调。
webpack构建的钩子主要包括编译，分析模块及依赖关系，构建模块，封装结果，生成文件等。
