对这个题目的理解，我觉得反过来比较好，你在开发过程中遇到了什么问题，是用那些Loader解决的。
让我们从最开始的html开始，即使什么都不添加，index.html本身也是可以打开的（可能也会有一些内容）。
- 支持React（TS）
React是用jsx（js）来开发的，所以webpack做的最主要的一件事也就是从入口的自动地递归解析需要加载的所有资源文件。因为webpack本身只能“认识”js模块，所以要把别的文件也“转化”成其理解的js模块。
由于React开发中使用了较新的ES6语法甚至ES7，所以要用Babel转移。
- babel-loader：把 ES6 转换成 ES5
- ts-loader
- awesome-typescript-loader:速度更快
- 样式
一个页面首先会遇到的问题就是样式，webpack最后会把所有js打包成一个chunk（不考虑分包之类的操作），所有的样式也会被打包进js里。
所以我们引入了
- style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS
- css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
- postcss-loader：兼容性，样式补全
- less-loader
- sass-loader
- 资源（图片，字体，视频等）
当我们在页面中使用到图片时，webpack并不认识后缀为.png或.jpeg的文件，所以要通过url-loader或file-loader的转换，然后以相对路径引用。
- url-loader:和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去
- file-loader:把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件
- 配置文件（json和yaml）
为了转化常见配置文件需要引入
- json-loader
- yaml-loader
- 开发和团队
实际开发中，我们会遇到各种各样的bug，而打包后的chunk是一堆晦涩难懂的代码，所以我们可能要通过source-map-loader来提供额外的Source Map文件。
团队开发中，也要通过ESLint来保证代码的一致性和可靠性。
- source-map-loader:加载额外的 Source Map 文件，以方便断点调试
- eslint-loader:通过 ESLint 检查 JavaScript 代码
- tslint-loader
- markdown-loader:把MD转化为HTML