这是我参与「第五届青训营 」笔记创作活动的第10天，关于Webpack知识体系的知识点总结，包括：什么是webpack和使用Webpack。
———Zy_Thoma
什么是webpack
过去存在的问题：
- 依赖手工，文件多的时候，操作过程繁琐
- 当代码文件之间有依赖的时候，就得严格按依赖顺序书写
- 开发与生产环境一致，难以接入TS或JS新特性
- 比较难以接入Less、Sass等工具
- JS、图片、CSS资源管理模型不一致
webpack本质上是一种前端资源编译、打包工具
- 多份资源文件打包成一个Bundle
- 支持Babel、Eslint、TS、CoffeScrit、Less、Sass
- 支持模块化处理css、图片等资源文件
- 支持HMR+开发服务器
- 支持持续监听、持续构建
- 支持代码分离
- 支持Tree-shaking
- 支持Sourcemap
- ...
使用Webpack
核心流程——极度简化版
关于Webpack的使用方法，基本都围绕"配置"展开，而这些配置大致可划分为两类：
- 流程类：作用于流程中某个或若干个环节，直接影响打包效果的配置项。
- 工具类：主流程之外，提供更多工程化能力的配置项。
模块化+一致性
- 多个文件资源合并成一个，减少http请求数
- 支持模块化开发
- 支持高级JS特性
- 支持TypeScript、CoffeeScript方言
- 统一图片、CSS、字体等其他资源的处理模型
- ...
流程类配置
问题：
-
Loader有什么作用？为什么这里需要用到css-loader、style-loafer
-
与旧时代—在HTML 文件中维护 css 相比，这种方式会有什么优劣处？
-
有没有接触过 Less、Sass、 Stylus 这一类 CSS 预编译框架？如何在 Webpack 接入这些工具？
-
Baael具体有什么功能？
-
Babel与Webpack分别解决了什么问题？为何两者可以协作到一起？
-
除了上面提到的内容，还有哪些配置可以划分为“流程类”配置？
-
工具类配置具体有什么作用？包括·devtool/cache/stat·等。
