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打包過程中的某些節點，執行廣泛的任務