從功能作用的角度區分
1. loader
由於webpack本身只能打包commonjs規范的js文件，所以針對css，圖片等格式的文件沒法打包，就需要引入第三方的模塊進行打包。
loader 擴展了webpack，只專注於轉化文件這一個領域，完成壓縮 / 打包 / 語言翻譯等，僅僅只是為了打包，僅僅只是為了打包。
如 css-loader 和 style-loader 模塊，是為了打包css的
如 babel-loader 和 babel-core 模塊，是為了把es6的代碼 轉成 es5
如 url-loader 和 file-loader，是為了把圖片進行打包
2. plugin
plugin也是為了擴展webpack的功能，plugin是作用於webpack本身的；
從打包優化到壓縮，到重新定義環境變量，webpack提供了很多開箱即用的插件：
如 CommonChunkPlugin 主要用於提取第三方庫和公共模塊，避免首屏加載的bundle文件 或者 按需加載的bundle文件體積過大，導致加載時間過長，是優化的利器
注：CommonsChunkPlugin於4.0及以后被移除，使用SplitChunksPlugin替代
如 html-webpack-plugin 用於html文件的拷貝，打包，還給html中自動增加了引入打包后的js文件的代碼 <script src=""></script>，還能指明把js文件引入到html文件的底部等，參考 webpack打包
從運行時機的角度區分
1. loader運行在打包文件之前，loader為在模塊加載時的預處理文件
2. plugins在整個編譯周期 都起作用
引自： https://blog.csdn.net/jiang7701037/article/details/98887179