webpack中Loader和Plugin的区别和常见的loader, plugins

区别

• loader是文件加载器, 能够加载资源文件, 并对这些文件进行一些处理, 比如编译,压缩等, 最终一起打包到指定的文件中
• plugin 赋予了webpack各种灵活的功能, 例如打包优化, 资源管理, 环境变量注入等, 目的是解决loader无法实现的其他事

• loader运行在打包文件之前
• plugins在整个编译周期都起作用 在webpack运行的生命周期中会广播出许多事件, Plugin可以监听这些事件, 在合适的时机通过webpack提供的API改变输出结果

对于loader, 实质是一个转换器, 将A文件进行编译形成B文件, 操作的是文件, 比如将A.scss 或 A.less 转换B.css, 单纯的文件转换过程

常见的loader

1. file-loader：把文件输出到⼀个文件夹中，在代码中通过相对 URL 去引用输出的文件

2. url-loader：和 file-loader 类似，但是能在⽂件很⼩的情况下以 base64 的⽅式把⽂件内容注⼊到代码中去(如果文件小于限制，可以返回 data URL)

3. raw-loader: 加载文件原始内容(utf-8)

4. source-map-loader：加载额外的 Source Map ⽂件，以⽅便断点调试

5. image-loader：加载并且压缩图⽚⽂件

JSON

1. json-loader: 加载JSON文件(默认包含)
2. json5-loader: 加载和转译JSON 5 文件

转换编译Transpiling

1. babel-loader: 加载 ES2015+ 代码, 然后使用Babel转译为ES5
2. ts-loader: 像加载Javascript一样加载 TypeScript 2.0+

样式

1. css-loader：加载 CSS，⽀持模块化、压缩、⽂件导⼊等特性. css-loader 遍历匹配文件中的 @import 和 url()

2. style-loader：把 CSS 代码注⼊到 JavaScript 中，通过 DOM 操作去加载 CSS。

清理和测试 Linting && Testing

1. eslint-loader：通过 ESLint 检查 JavaScript 代码

常见的plugins

1. html-webpack-plugin可以根据模板自动生成html代码，并自动引用css和js文件

2. HotModuleReplacementPlugin 热更新

3. webpack-bundle-analyzer:可视化Webpack输出文件的体积（业务组件、依赖第三方模块)

4. compression-webpack-plugin 生产环境可采用gzip压缩JS和CSS