当自己在简历中写着熟练使用webpack的时候，殊不知自己只是在vue脚手架，react脚手架的路上走着比较轻松而已。
当面试官问你这几个问题的时候，你还能从容答上来吗(高手请忽略)
- 什么是webpack，webpack的打包过程是怎么样的？
- webpack基础配置的属性有哪些
- 什么是loader?什么是plugin?他们执行先后关系是什么？
- 提高webpack的构建速度(这个比较广泛)
- 是否自己写过plugin(一旦你回答写过，马上问题就来了)
- 是否用过compiler ，介绍其中几个方法？
正文
先抛开这几个问题。谈谈本人正常学习webpack的过程，由于几年前先接触的vue，一套vue-cli跑下来 ，生成demo以后感觉自己不仅
学会了vue，还精通了webpack。
后面有个偶然的机会，想自己从头使用webpack部署。才知道里面没有那么简单。
这里有个参考的文章:
感兴趣的可以自己看。
webpack的打包过程是怎么样的
这个当自己实践着一步步去尝试开始的时候的，会有个比较清晰的理解的。
webpack是一个打包模块化javascript的工具，在webpack里一切文件皆模块，
通过loader转换文件，通过plugin注入钩子，最后输出由多个模块组合成的文件，
webpack专注构建模块化项目。
webpack基础配置的属性有哪些
- 入口(entry)
- 输出(output)
- loader
- 插件(plugins)
当然在实际工程中，看到的的webpack的配置属性远远没有这么简单。
比如：我们会环境配置。dev,pro等等。
可能会使用到代理配置:类似于下面代码所示，用来进行跨域配置
proxyTable: {
'/api': {
target: 'http://……………………',
changeOrigin: true,
pathRewrite: {
'^/api': '/api'
}
},
}
每个属性的配置都可以延伸开，比如入口，可以是单入口，也可以是多入口。
一旦用到具体的场景的话。
每个配置项都有可能变得复杂起来。
什么是loader?什么是plugin?他们执行先后关系是什么？
loader 用于对模块的源代码进行转换。
loader 可以使你在 import 或"加载"模块时预处理文件。
因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。
插件是 webpack 的支柱功能。
webpack 自身也是构建于，你在 webpack 配置中用到的相同的插件系统之上！
插件目的在于解决 loader 无法实现的其他事。
自然而然，这样通过描述，就能比较清晰的理解的。
plugin是在loader之后执行的，当loader处理完模块代码，plugin继续处理loader未能做完的事情
提高webpack的构建速度
这里有的一篇文章介绍的比较详细
https://www.jianshu.com/p/bb1e76edc71e
当然优化的点大致可以区分下
- 选用合适的loader，这个是比较重要的，能够有效的提升webpack编译的速度。
- 使用Happypack 实现多线程加速编译。
- 不需要打包编译的插件库换成全局"script"标签引入的方式
- 开启缓存
什么是compiler
这个只有当自己真正去写插件的时候，才会意识到的。
Compiler 模块是 webpack 的支柱引擎，它通过 CLI 或 Node API 传递的所有选项，
创建出一个 compilation 实例。它扩展(extend)自 Tapable 类，以便注册和调用插件。
大多数面向用户的插件，会先在 Compiler 上注册。
以下生命周期钩子函数，
| 生命周期 | 说明 |
|---|---|
| entryOption | 在 entry 配置项处理过之后，执行插件 |
| afterPlugins | 设置完初始插件之后，执行插件 |
| afterResolvers | resolver 安装完成之后，执行插件。 |
| environment | environment 准备好之后，执行插件。 |
| afterEnvironment | environment 安装完成之后，执行插件。 |
| beforeRun | compiler.run() 执行之前，添加一个钩子。 |
| run | 开始读取 records 之前，钩入(hook into) compiler。 |
| watchRun | 监听模式下，一个新的编译(compilation)触发之后，执行一个插件，但是是在实际编译开始之前。 |
| normalModuleFactory | NormalModuleFactory 创建之后，执行插件。 |
| contextModuleFactory | ContextModuleFactory 创建之后，执行插件。 |
| beforeCompile | 编译(compilation)参数创建之后，执行插件。 |
| compile | 一个新的编译(compilation)创建之后，钩入(hook into) compiler。 |
| thisCompilation | 触发 compilation 事件之前执行（查看下面的 compilation）。 |
| compilation | 编译(compilation)创建之后，执行插件。 |
| make | …… |
| afterCompile | …… |
| shouldEmit | ……。 |
| needAdditionalPass | …… |
| afterEmit | 生成资源到 output 目录之后。 |
| done | 编译(compilation)完成。 |
| failed | 编译(compilation)失败。 |
| invalid | 监听模式下，编译无效时。 |
| watchClose | 监听模式停止。 |
实际应用的时候，大概只需要上面几个编译前，编译后的几个钩子
最后
请原谅偶只是个标题党，文章也只是大致介绍的webpack所有需要了解的知识点的大概范围。
在实际场景应用的时候，各不相同。