對於loader，它就是一個轉換器，將A檔案進行編譯形成B檔案，這裡操作的是檔案，比如將A.scss或A.less轉變為B.css，單純的檔案轉換過程；
對於plugin，它就是一個擴充套件器，它豐富了wepack本身，針對是loader結束後，webpack打包的整個過程，它並不直接操作檔案，而是基於事件機制工作，會監聽webpack打包過程中的某些節點，執行廣泛的任務。
1、loader
Loader是webpack最重要的功能之一。Loader讓webpack能夠處理不同的檔案。loader可以將所有型別的檔案轉換為webpack能夠處理的有效模組，然後利用webpack的打包能力，對他們進行處理。本質上，webpack loader將所有型別的檔案，轉換為應用程式的依賴圖可以直接引用的模組。 例如，
loader可以將sass，less檔案的寫法轉換成css，而不在使用其他轉換工具。
可以將ES6或者ES7的程式碼，轉換成大多數瀏覽器相容的JS程式碼。
可以將React中的JSX轉換成JavaScript程式碼。
複製程式碼即，在webpack中Loader有兩個目標：
識別出應該被對應的loader進行轉換的檔案。（使用test屬性）
轉換這些檔案，從而使其能夠被新增到依賴圖中（並最終新增到bundle中）。（使用use屬性）
複製程式碼用法： Loader需要單獨安裝，需要什麼Loader就使用npm安裝即可。並對應webpack.config.js中的module屬性：
module:{
rules: [{
test:
use:
include/exclude:
query:
}]
}
複製程式碼test：用於匹配處理檔案的副檔名的表示式，必須
use：loader名稱，就是要使用的模組名，必須
include/exclude：手動新增必須處理的檔案（資料夾）或遮蔽不需要處理的檔案（資料夾），可選
query：為loader提供額外的設定選項，可選
複製程式碼其中，use有三種寫法：
（1）直接用use：
複製程式碼 use:['style-loader','css-loader']
複製程式碼（2） 將use換成loader：
loader:['style-loader','css-loader']
複製程式碼（3）使用use + loader：
複製程式碼 use: [{
loader: "style-loader"
}, {
loader: "css-loader",
options:{}
}]
複製程式碼例如:
module:{
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true
}
}
]
}
]
},
複製程式碼2、plugins
loader被用於轉換某些型別的模組，而外掛則可以用於執行廣泛的任務。外掛的範圍包括，從打包優化和壓縮，一直到重新定義環境中的變數。外掛介面功能極其強大，可以用來處理各種各樣的任務。 想要使用一個外掛，你只需要 require()它，然後將它新增到plugins陣列中。多數外掛可以通過選項自定義。你也可以在一個配置中因為不同目的而多次使用同一個外掛，這時需要通過使用new操作符來建立它的一個例項。 剖析： webpack外掛是一個具有 apply 屬性的JavaScript物件。apply屬性會被webpack compiler呼叫，並且compiler物件可在整個編譯週期訪問。 用法： 由於外掛可以攜帶引數/選項，你必須在webpack配置中，想plugins屬性傳入 new 例項。 例如:
// webpack.config.js檔案頭部引入外掛
const uglify = require('uglifyjs-webpack-plugin');
const htmlPlugin= require('html-webpack-plugin');
// 外掛配置
plugins:[
new uglify()，
new htmlPlugin({
minify:{
removeAttributeQuotes: true
},
hash: true,
template: './src/index.html'
}),
],
複製程式碼（1）JS 壓縮 在webpack中JS壓縮使用的是 uglifyjs-webpack-plugin外掛。
const uglify = require('uglifyjs-webpack-plugin');
plugins: [
new uglify();
]
複製程式碼注意： 在開發環境中使用該外掛會報錯，因為在開發預覽時需要明確報錯行數和錯誤資訊，所以不需要對JS壓縮，而生產環境中才會對JS壓縮。devServer用於開發環境，而壓縮JS用於生產環境，在開發中做生產環境的事情，所以會報錯。
（2）打包HTML 要將 HTML 檔案從 src 目錄下打包到 dist 目錄下，需要藉助 html-webpack-plugin 外掛。該外掛需要安裝。
npm install html-webpack-plugin --save-dev
複製程式碼配置：
const htmlPlugin = require('html-webpack-plugin');
plugins: [
new htmlPlugin({
minify: {
removeAttributeQuotes: true
},
hash: true,
template: './src/index.html'
})
]
複製程式碼minify：是對HTML檔案進行壓縮，removeAttributeQuotes是去除屬性的雙引號。
hash：為了避免快取js，加入 hash
template：是要打包的HTML模板路徑和檔名稱。
複製程式碼更多angular1/2/4/5、ionic1/2/3、react、vue、微信小程式、nodejs等技術文章、視訊教程和開源專案，請關注微信公眾號——全棧弄潮兒。
前端最火框架排行榜——小程式二維碼
