loader 和 plugin 的区别是什么

不同的作用：

Loader直译为"加载器"。Webpack将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到loader。 所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。
loader它只专注于转化文件（transform）这一个领域，完成压缩，打包，语言翻译; 而plugin不仅只局限在打包，资源的加载上，还可以打包优化和压缩，重新定义环境变量等

Plugin直译为"插件"。Plugin可以扩展webpack的功能，让webpack具有更多的灵活性。 在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果

loader运行在打包文件之前（loader为在模块加载时的预处理文件）；plugins在整个编译周期都起作用

一个loader的职责是单一的，只需要完成一种转换。一个loader其实就是一个Node.js模块。当需要调用多个loader去转换一个文件时，每个loader会链式的顺序执行

不同的用法：

Loader在module.rules中配置，也就是说他作为模块的解析规则而存在。 类型为数组，每一项都是一个Object，里面描述了对于什么类型的文件（test），使用什么加载(loader)和使用的参数（options）

Plugin在plugins中单独配置。 类型为数组，每一项是一个plugin的实例，参数都通过构造函数传入

常见的loader和plugin插件

Loader:
1. 样式：style-loader、css-loader、less-loader、sass-loader等
2. 文件：raw-loader、file-loader 、url-loader等

file-loader、url-loader等可以处理资源，file-loader可以复制和放置资源位置，并可以指定文件名模板，用hash命名更好利用缓存。

url-loader可以将小于配置limit大小的文件转换成内敛Data Url的方式，减少请求。raw-loader可以将文件已字符串的形式返回

3. 编译：babel-loader(把 ES6 转换成 ES5)、coffee-loader 、ts-loader等
4. 校验测试：mocha-loader、jshint-loader 、eslint-loader等
5. imports-loader、exports-loader等可以向模块注入变量或者提供导出模块功能

![常用的loader](https://img.haomeiwen.com/i17801587/6330e73d855d37f0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

Plugin:
1. webpack内置UglifyJsPlugin，压缩和混淆代码,通过UglifyES压缩ES6代码。
2. webpack内置CommonsChunkPlugin，提取公共代码,提高打包效率，将第三方库和业务代码分开打包
3. ProvidePlugin：自动加载模块，代替require和import

 new webpack.ProvidePlugin({ 
    $: 'jquery',
     jQuery: 'jquery' 
})

4. html-webpack-plugin可以根据模板自动生成html代码，并自动引用css和js文件
5. extract-text-webpack-plugin 将js文件中引用的样式单独抽离成css文件

常用的plugin