目的：增強webpack專案自動化能力。
loader專注實現資源模組的載入，從而實現整體專案的打包。
plugin解決專案中除了資源載入以外的自動化工作。
例如在打包之前，自動清除dist目錄
拷貝不需要參與打包的資源檔案到輸出目錄
壓縮打包結果輸出的**
webpack + plugin 實現了大多前端工程化的工作，也是很多開發者理解為 webpack就是前端工程化 的原因。
絕大多數外掛程式匯出的都是乙個模組類(class)，所以使用時就要建立這個外掛程式的示例，並配置到plugins屬性中。
clean-webpack-plugin 自動清理輸出目錄
// webpack.config.js
const
=require
('clean-webpack-plugin'
)module.exports =
目前位置示例都是以硬編碼的方式，單獨存放在專案根目錄下，這個方式有兩個問題：
專案發布時需要同時發布根目錄下的 html檔案 和 dist目錄下所有的打包結果，並且上線後，需要人工確認html中路徑引用都是正確的，相對麻煩。
專案輸出(output)的目錄或檔名，也就是打包結果的配置，發生了變化，還需要手動去修改html中script標籤的src
解決辦法就是通過webpack輸出html檔案，也就是讓html也參與到webpack的構建過程。
構建過程中
webpack知道生成了多少bundle，它會自動將這些打包檔案新增到html檔案中。
webpack還把html檔案輸出到dist目錄，這樣上線時直接發布dist目錄即可。
bundle檔案是webpack動態的注入到html檔案中，不需要手動的硬編碼，它確保路徑的引用是正常的。
html-webpack-plugin 預設自動生成乙個空白的index.html檔案到配置的輸出目錄，並將打包檔案(bundle)動態注入到html中。
html-webpack-plugin 配置
通過修改外掛程式的配置屬性，對自動生成的html檔案做一些簡單改進，例如：
title：配置標題
meta：自定義元資料標籤
html模板預設使用lodash語法。
同時輸出多個頁面檔案
html-webpack-plugin 預設生成乙個index.html檔案。
同樣可以通過建立多個例項，生成多個html檔案。
通過filename指定輸出的檔名。
copy-webpack-plugin 複製靜態檔案
對於專案中不需要參與構建的靜態檔案，也需要發布到線上，它們一般統一放在專案的public目錄中。
可以通過 copy-webpack-plugin 外掛程式將它們拷貝到輸出目錄。
它接收乙個檔案相對路徑或目錄組成的陣列，路徑可以使用萬用字元。
// 拷貝檔案 v5.x用法
// new copywebpackplugin([
// 'public/**',
// 'public'
// ])
// 拷貝檔案 v6.x使用patterns 配置
newcopywebpackplugin
()
compiler物件是webpack工作過程中最核心的物件。
它包含當前構建的所有的配置資訊。
可以用它來註冊鉤子函式。
使用外掛程式時，通過這個class構建乙個例項。
鉤子機制
plugin通過鉤子機制實現。
鉤子機制類似web中的事件。
為了便於外掛程式的擴充套件，webpack幾乎給每乙個環節都埋下了乙個鉤子。
開發外掛程式時就可以，向這些不同的節點，掛載不同的任務。
可以去webpack官網檢視它預先定義好的鉤子（api-plugins - compiler hooks）
開發乙個外掛程式
自定義乙個用於清除bundle.js中/*[*+]*/注釋的外掛程式。
確認外掛程式執行時機（即掛載到哪個鉤子上）
通過compiler.hooks訪問到具體的鉤子。
通過tap方法註冊乙個鉤子函式，它接收兩個引數：
引數1：外掛程式的名稱
引數2：需要掛載到這個鉤子上的函式，它接收乙個compilation物件作為引數
compilation可以理解為此次打包過程的上下文
此次所有打包過程產生的結果都會放到compilation物件中
compilation.assets訪問所有編譯的資源檔案，每個元素都是乙個包含資源檔案資訊的物件
key是資源檔案的名稱
value包含乙個source()方法
呼叫它可以獲取編譯檔案的內容
重定義這個方法返回的值，實現修改編譯檔案的內容
注：webpack還要求必須返回乙個size()方法，用於返回編譯檔案的大小
class
myplugin}}
}}
外掛程式通過在生命週期的鉤子中掛載函式實現擴充套件。
在外掛程式開發中最重要的兩個資源就是compiler和compilation物件。理解它們的角色是擴充套件 webpack 引擎重要的第一步。
compilation物件代表了一次資源版本構建。
webpack二刷之一 快速介紹
背景 nodev12.10.0 webpack4 yarn 安裝依賴yarn add webpack webpack cli dev 執行命令yarn webpack 會預設從src index.js開始打包，並將檔案預設輸出為dist目錄下的main.js檔案 webpack 4 以後的版本支援零...
用 PHP 來刷leetCode 之 三數之和
給定乙個包含 n 個整數的陣列nums，判斷nums中是否存在三個元素 a，b，c 使得 a b c 0 找出所有滿足條件且不重複的三元組。注意 答案中不可以包含重複的三元組。例如,給定陣列 nums 1,0,1,2,1,4 滿足要求的三元組集合為 1,0,1 1,1,2 param integer...
leetcode刷題 easy 之三 回文數
判斷乙個整數是否是回文數。回文數是指正序 從左向右 和倒序 從右向左 讀都是一樣的整數。示例 1 輸入 121 輸出 true示例 2 輸入 121 輸出 false 解釋 從左向右讀,為 121 從右向左讀,為 121 因此它不是乙個回文數。示例 3 輸入 10 輸出 false 解釋 從右向左讀...