webpack 中的loaders和plugins的区别？

使用webpack的人都知道配置webpack有entry，output，module(loader)，plugins，devtool五大模块，

webpack做的就是分析代码，转换代码，编译代码，输出代码，

其中loader和pugins都是用于加载相应的组件进行打包的，但是究竟有什么区别呢？，我们来说说

1、loader

   loader是文件加载器，能够加载资源文件，并对这些文件进行一些处理，诸如编译、压缩等，最终一起打包到指定的文件中，webpack本身只支持js，json格式，不管我们在vue，react项目中我们都要单独配置自己loader，vue-loader或者bebal-loader等等，用于转换jsx，tsx，ts，vue等文件格式，下面一一列举了一下，

编译模块	需要的loader
react	babel-loader
vue	vue-loader
typescript	ts-loader
less	less-loader
sass	sass-loader
css	css-loader
png|svg|jpg|gif	url-loader
woff|woff2|eot|ttf|otf|pdf	file-loader
等等

 

实际上这些loader都是我们在编译时候是指负责文件转换器的工作，将这些我们在浏览器上运行不了的东西，编辑成html，js，css等，单纯的文件转换；

{
   test: /\.vue$/,
   loader: 'vue-loader',
   exclude: /node_modules/,
}, 
{
   test: /\.(ts|x)$/,
   exclude: /node_modules/,
   use: [{
         loader: 'babel-loader',
         options: {
            cacheDirectory: true,
         },
      },
      {
         loader: 'ts-loader',
         options: {
            transpileOnly: true,
            experimentalWatchApi: true,
            appendTsSuffixTo: [/\.vue$/],
         },
      },
   ],
},

2、plugins

在webpack运行的生命周期中会广播出许多事件，plugin可以监听这些事件，在合适的时机通过webpack提供的API改变输出结果。pugins是一个扩展器，webpack的强大生态给一些第三方插件有了用武之地，在webpack整个打包过程中，并不是管理上面loader负责处理文件的部分，而是处理我们一些实际的操作，例如生成html文件插入js文件、加载bundle文件、压缩js，css等文件等等操作；

 

总结一下区别：

对于loader，它是一个转换器，将A文件进行编译形成B文件，这里操作的是文件，比如将A.scss转换为A.css，单纯的文件转换过程，plugin是一个扩展器，它丰富了webpack本身，针对是loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，执行广泛的任务