webpack 中 loader 和 plugin 的区别是什么

loader

loader是解析，转换器。

由于webpack 本身只能打包commonjs规范的js文件，所以，针对css，图片等格式的文件没法打包，就需要引入第三方的模块进行打包。

对于其他格式的文件，webpack通过loader将其转化为commonJS规范的文件后，webpack才能解析到。

loader作用

loader只专注于转化文件（transform）这一个领域，完成压缩，打包，语言翻译。

loader是运行在NodeJS中。

让webpack能够处理非js模块，然后使用webpack的打包，编译能力去输出一个让浏览器可识别的文件内容。

常用loader

webpack.config.js中指定loader。module.rules可以指定多个loader.

   css-loader、style-loader、postcss-loader、sass-loader //主要用于打包css文件的loader
   babel-loader、babel-core //把ES6的代码转成ES5
   url-loader、file-loader //把图片进行打包

plugins

Plugin直译为插件， plugin可以扩展webpack的功能，plugin完成的是loader不能完成的功能。让webpack具有更多的灵活性，

在webpack运行的生命周期中会广播出很多事件，在webpack打包编译过程里，plugin监听这些事件,在对应的事件节点里执行自定义操作，通过webpack通过的API改变输出结果.比如资源管理、bundle文件优化等操作.

plugin作用

plugin也是为了扩展webpack的功能，但是 plugin 是作用于webpack本身上的。
而且plugin不仅只局限在打包，资源的加载上，它的功能要更加丰富。从打包优化和压缩，到重新定义环境变量，功能强大到可以用来处理各种各样的任务

常用plugin

webpack提供了很多开箱即用的插件

CommonChunkPlugin//主要用于提取第三方库和公共模块，避免首屏加载的bundle文件，或者按需加载的bundle文件体积过大，导致加载时间过长，是一把优化的利器。而在多页面应用中，更是能够为每个页面间的应用程序共享代码创建bundle。
HtmlWebpackPlugin//主要对html模板进行处理，生成对应的html,引入需要的资源模块
ExtractTextPlugin//将js文件中引用的样式单独抽离成css文件
UglifyJsPlugin//压缩和混淆代码
optimize-css-assets-webpack-plugin//不同组件中重复的css可以快速去重
compression-webpack-plugin //生产环境可采用gzip压缩JS和CSS

loader与plugin区别

功能角度：loader是转换器， plugin是扩展器
运行角度：loader运行在打包文件之前（loader为在模块加载时的预处理文件），plugins在整个编译周期都起作用。

参考

zhuanlan.zhihu.com/p/28245984


## loader与plugin的区别