使用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都是我们在编译时候是指负责文件转换器的工作，将这些我们在浏览器上运行不了的东西，编辑成html，js，css等，单纯的文件转换；

 1 {
 2    test: /\.vue$/,
 3    loader: ‘vue-loader‘,
 4    exclude: /node_modules/,
 5 }, 
 6 {
 7    test: /\.(ts|x)$/,
 8    exclude: /node_modules/,
 9    use: [{
10          loader: ‘babel-loader‘,
11          options: {
12             cacheDirectory: true,
13          },
14       },
15       {
16          loader: ‘ts-loader‘,
17          options: {
18             transpileOnly: true,
19             experimentalWatchApi: true,
20             appendTsSuffixTo: [/\.vue$/],
21          },
22       },
23    ],
24 },

View Code

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打包过程中的某些节点，执行广泛的任务

webpack 中的loaders和plugins的区别？