携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第25天
一、常见的 Loader
1.file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文
2.url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去
3.source-map-loader：加载额外的 Source Map 文件，以方便断点调试
4.image-loader：加载并且压缩图片文件
5.babel-loader：把 ES6 转换成 ES5
6.css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
7.style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载CSS。
8.eslint-loader：通过 ESLint 检查 JavaScript 代码
二、Loader 和 Plugin 的不同
-
不同的作用
Loader 直译为"加载器"。Webpack 将一切文件视为模块，但是 webpack 原生是只能解析 js 文件，如果想将其他文件也打包的话，就会用到 loader。 所以 Loader 的作用是让webpack 拥有了加载和解析非 JavaScript 文件的能力。
Plugin 直译为"插件"。Plugin 可以扩展 webpack 的功能，让 webpack 具有更多的灵活性。
在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。 -
不同的用法
Loader 在 module.rules 中配置，也就是说他作为模块的解析规则而存在。 类型为数组，每一项都是一个 Object，里面描述了对于什么类型的文件（test），使用什么加载(loader)和使用的参数（options） Plugin 在 plugins 中单独配置。 类型为数组，每一项是一个 plugin 的实例，参数都通过构造函数传入。
三、bundle，chunk，module 的作用
module：开发中的每一个文件都可以看作是 module，模块不局限于 js，也包含 css，图片等。
chunk：表示代码块，一个 chunk 可以由多个模块组成。
bundle：最终打包完成的文件，一般就是和 chunk 一一对应的关系，bundle 就是对 chunk 进行编译压缩打包等处理后的产出。
