一、從功能作用的角度區分：
1、loader：
loader從字面的意思理解，是 加載 的意思。
由於webpack 本身只能打包commonjs規範的js文件，所以，針對css，圖片等格式的文件沒法打包，就需要引入第三方的模塊進行打包。
loader雖然是擴展了 webpack ，但是它只專注於轉化文件（transform）這一個領域，完成壓縮，打包，語言翻譯。
loader是運行在NodeJS中。
僅僅只是爲了打包，僅僅只是爲了打包，僅僅只是爲了打包，重要的話說三遍！！！
如：css-loader和style-loader模塊是爲了打包css的
babel-loader和babel-core模塊時爲了把ES6的代碼轉成ES5
url-loader和file-loader是把圖片進行打包的。
2、plugin是做什麼的？
plugin完成的是loader不能完成的功能，這是廢話，沒有說清楚。
plugin也是爲了擴展webpack的功能，但是 plugin 是作用於webpack本身上的。而且plugin不僅只侷限在打包，資源的加載上，它的功能要更加豐富。從打包優化和壓縮，到重新定義環境變量，功能強大到可以用來處理各種各樣的任務。webpack提供了很多開箱即用的插件：CommonChunkPlugin主要用於提取第三方庫和公共模塊，避免首屏加載的bundle文件，或者按需加載的bundle文件體積過大，導致加載時間過長，是一把優化的利器。而在多頁面應用中，更是能夠爲每個頁面間的應用程序共享代碼創建bundle。
插件可以攜帶參數，所以在plugins屬性傳入new實例。
如：
1）、針對html文件打包和拷貝（還有很多設置）的插件：html-webpack-plugin。
不但完成了html文件的拷貝，打包，還給html中自動增加了引入打包後的js文件的代碼（<script src=""></script>），還能指明把js文件引入到html文件的底部等等。
具體使用，可以查看：webpack打包（主要是處理html文件），並啓動服務器
代碼如下：
plugins:[
//對html模板進行處理，生成對應的html,引入需要的資源模塊
new HtmlWebpackPlugin({
template:'./index.html',//模板文件，即需要打包和拷貝到build目錄下的html文件
filename:'index.html',//目標html文件
chunks:['useperson'],//對應加載的資源,即html文件需要引入的js模塊
inject:true//資源加入到底部，把模塊引入到html文件的底部
})
]
二、從運行時機的角度區分
1 . loader運行在打包文件之前（loader爲在模塊加載時的預處理文件）
2. plugins在整個編譯週期都起作用。