webpack loader和plugin的区别

由来：扩展webpack的功能

webpack是现在前端开发常用的打包工具，webpack本身只能识别js文件，但是前端资源还包含css style 图片等，webpack无法识别和打包，因此需要loader来加载并转换文件，完成文件的编译，打包和压缩。而plugin是为了扩展webpack的功能，作用于webpack的整个生命周期内。

作用点不同

loadre作用于文件
plugin作用于webpack在loader之后的整个生命周期

作用时间不同

先loader 再用plugin

作用不同

都是为了扩展webpack的功能。
但loader只作用于文件，只是为了文件转换
plugin 不会直接作用于文件，而是监听webpack在全周期的事件，有点像切面和不同周期内的拦截器

种类不同

常用的loader

1. css相关的
   css-loader 遍历所有require的css文件，输出文件内容
   style-loader 将css内容输出到页面的style标签。
2. es6->es5的
   babel-loader babel-core
3. 图片打包
   url-loader file-loader

常用的plugin

1. HotModuleReplacementPlugin
   模块热更新插件 。Hot-Module-Replacement 的热更新是依赖于 webpack-dev-server，后者是在打包文件改变时更新打包文件或者 reload 刷新整个页面，HRM 是只更新修改的部分。
   HotModuleReplacementPlugin是webpack模块自带的，所以引入webpack后，在plugins配置项中直接使用即可

const webpack = require('webpack')

plugins: [
  new webpack.HotModuleReplacementPlugin(), // 热更新插件
]

2. html-webpack-plugin
   生成 html 文件。将 webpack 中entry配置的相关入口 chunk 和 extract-text-webpack-plugin抽取的 css 样式 插入到该插件提供的template或者templateContent配置项指定的内容基础上生成一个 html 文件，具体插入方式是将样式link插入到head元素中，script插入到head或者body中。
   最常用的18个webpack plugin
3. clean-webpack-plugin
   用于在打包前清理上一次项目生成的bundle文件，他会根据output。path 自动清理文件夹，这个插件在生产环境用的频率非常高，因为生产环境经常会通过hash生成很多bundle文件，如果不进行清理的话，会导致文件夹非常庞大。