plugin
一、Plugin 的作用
通过插件我们可以扩展 webpack，加入自定义的构建行为，使 webpack 可以执行更广泛的任务，拥有更强的构建能力。
二、Plugin 工作原理
webpack 就像一条生产线，要经过一系列处理流程后才能将源文件转换成输出结果。 这条生产线上的每个处理流程的职责都是单一的，多个流程之间有存在依赖关系，只有完成当前处理后才能交给下一个流程去处理。插件就像是一个插入到生产线中的一个功能，在特定的时机对生产线上的资源做处理。webpack 通过 Tapable 来组织这条复杂的生产线。 webpack 在运行过程中会广播事件，插件只需要监听它所关心的事件，就能加入到这条生产线中，去改变生产线的运作。webpack 的事件流机制保证了插件的有序性，使得整个系统扩展性很好。——「深入浅出 Webpack」
站在代码逻辑的角度就是：webpack 在编译代码过程中，会触发一系列 Tapable 钩子事件，插件所做的，就是找到相应的钩子，往上面挂上自己的任务，也就是注册事件，这样，当 webpack 构建的时候，插件注册的事件就会随着钩子的触发而执行了。
三、常见plugin
clean-webpack-plugin：打包前自动清理dist目录，防止文件残留。copy-webpack-plugin：将单个文件或者整个目录复制到构建目录mini-css-extract-plugin：将 CSS 抽离出来单独打包并且通过配置可以设置是否压缩html-webpack-plugin：这个插件可以配置生成一个 HTML5 文件，其中script标签包含所有 Webpack 包。如果你设置多个入口点，你可以据此实现多页面应用打包。
提高效率的 plugin：
webpack-dashboard：可以更友好的展示相关打包信息。webpack-merge：提取公共配置，减少重复配置代码speed-measure-webpack-plugin：简称 SMP，分析出 Webpack 打包过程中 Loader 和 Plugin 的耗时，有助于找到构建过程中的性能瓶颈。size-plugin：监控资源体积变化，尽早发现问题HotModuleReplacementPlugin：模块热替换
loader
一、常见loader：
- 文件处理的loader
file-loader：当引入的文件是.png、.txt等时，可以通过file-loader解析项目中的url引入。根据配置将文件拷贝到相应的路径，并修改打包后文件的引入路径，让它指向正确的文件。url-loader：url-loader封装了file-loader且可以不依赖于file-loader单独使用，并且可以配置limit。对小于limit大小的图片转换成Base64，大于limit的时候使用file-loader里的方法。
- 语法检查的loader
tslint-loader：通过 TSLint 检查 TypeScript 代码eslint-loader：通过 ESLint 检查 JavaScript 代码
- css处理loader
style-loader：动态创建style标签，将 CSS 代码插入到head中。css-loader：负责处理@import、url等语句。例如import css from 'file.css'、url(image.png)。postcss-loader：负责进一步处理 CSS 文件，比如添加浏览器前缀，压缩 CSS 等less-loader：将.less文件内容转换成 CSS。sass-loader：将.sass文件内容转换成 CSS。
- JS 代码处理常见的 loader
babel-loader：将 JS 代码向低版本转换，我们需要使用babel-loader。ts-loader：将 TypeScript 转换成 JavaScript
plugin和loader的区别
Loader 本质就是一个函数，在该函数中对接收到的内容进行转换，返回转换后的结果。
因为 Webpack 只认识 JavaScript，所以 Loader 就成了翻译官，对其他类型的资源进行转译的预处理工作。
Plugin 就是插件，基于事件流框架 Tapable，插件可以扩展 Webpack 的功能，在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。
Loader 在 module.rules 中配置，作为模块的解析规则，类型为数组。每一项都是一个 Object，内部包含了 test(类型文件)、loader、options (参数)等属性。
Plugin 在 plugins 中单独配置，类型为数组，每一项是一个 Plugin 的实例，参数都通过构造函数传入。
