webpack loader与Plugin区别

loader

loader 是文件加载器，能够加载资源文件，并对这些文件进行一些处理，诸如编译，压缩等，最终一起打包到指定的文件中。

file-loader：文件加载。

url-loader：文件加载，可以设置阈值，小于时把文件 base64 编码。

image-loader：加载并压缩图片。

babel-loader： ES 6+ 转成 ES 5。

css-loader：处理 @import 和 url 这样的外部资源。

style-loader：在 head 创建 style 标签把样式插入。

vue-loader：加载 vue 单文件组件。

cache-loader：性能开销大的 loader 前添加，将结果缓存到磁盘。

svg-inline-loader：压缩后的 svg 注入代码。

import-loader，export-loader：可以向模块注入变量或者提供导出模块功能。

Plugin

打包优化和压缩，到重新定义环境变量，在编译过程中留下的一系列生命周期的钩子，通过调用这些钩子来实现在不同编译结果时对原模块进行处理。

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