弄清自己为什么去学，带着问题去学习，更有目的性的，比如我发现前端有个文件是webpack.config.js，我不清楚这是做什么，带着好奇心。不是把整个框架或者项目读通了才算成功，而是你在看源码的过程中某个片段、语句或者模块让你学习到新的设计思维、工具方法。
学习的过程中不太去纠结细节实现，而是寻找切入点先将这个语言或者框架有个大致的了解。如果有官方文档最优先选择去阅读官方文档。第二就是查阅一些网上高质量的学习笔记、书籍等参考资料。就这切入点分析代码流程，局部深入研究，及时总结，之后，再继续设定切入点，重复执行上述流程直到透彻地理解了问题
1. 为什么要使用webpack
- 大型项目特别是多人合作的时候，资源引入令人奔溃，模块化能够更清晰明了的进行管理
- 提高代码的复用率，方便开箱即用
- 解决命名冲突
2. 前端模块化
3.核心概念
- 入口(entry)：
webpack 应该使用哪个模块，来作为构建其内部依赖图的开始
- 输出(output)：
告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件
- Loader：
webpack 自身只理解 JavaScript，让 webpack 能够去处理那些非 JavaScript 文件，loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块。
注意：倒序加载，loader 是从右到左执行的，也就是先进后出的方式。
- 插件(plugins)
- mode（模式）
钩子的本质就是：事件。为了方便我们直接介入和控制编译过程，webpack 把编译过程中触发的各类关键事件封装成事件接口暴露了出来。这些接口被很形象地称做：hooks（钩子）。开发插件，离不开这些钩子
Tapable 为 webpack 提供了统一的插件接口（钩子）类型定义，它是 webpack 的核心功能库。webpack 中目前有十种 hooks，在 Tapable 源码中可以看到，他们是：
常用的plugins:
- html-webpack-plugin:编译html
- uglifyjs-webpack-plugin:代码压缩插件
- extract-text-webpack-plugin:将css模块和js模块分开打包，把css代码从js文件中抽离出来，单独出一个模块。
- copy-webpack-plugin:将单个文件或整个目录复制到生成目录。
- optimize-css-assets-webpack-plugin:压缩css文件
- compression-webpack-plugin:通过压缩算法，将前端打包好的资源文件进一步压缩，生成指定的、体积更小的压缩文件，让浏览器能够更快的加载资源
- webpack-bundle-analyzer:读取输出文件夹（通常是dist）中的stats.json文件，把该文件可视化展现，生成代码分析报告，可以直观地分析打包出的文件有哪些，及它们的大小、占比情况、各文件 Gzipped 后的大小、模块包含关系、依赖项等，对应做出优化，从而帮助提升代码质量和网站性能
- CommonsChunkPlugin:提取 chunks 之间共享的通用模块
- DefinePlugin: 允许创建一个在编译时可以配置的全局常量
- IgnorePlugin: 防止在 import 或 require 调用时，生成正则表达式匹配的模块
