webpack二刷之一 快速介紹

2021-10-07 09:55:07 字數 2525 閱讀 5736

背景:nodev12.10.0 +webpack4 + yarn

安裝依賴yarn add webpack webpack-cli --dev

執行命令yarn webpack

會預設從src/index.js開始打包,並將檔案預設輸出為dist目錄下的main.js檔案

webpack 4 以後的版本支援零配置的方式直接啟動打包。

整個打包過程會按照約定,預設將src/index.js作為打包入口,最終打包結果會存放在dist/main.js中。

通過在配置檔案webpack.config.js中配置entry``output自定義入口和輸出路徑。

webpack.config.js是執行在node環境中的js檔案,需要按照commonjs的方式去編寫**。

entry如果是相對路徑,前面的./不能省略

output輸出配置

filename輸出檔案的路徑

path輸出目錄,必須是絕對路徑,使用node的path模組轉換

webpack的配置檔案,支援匯出的格式:

配置物件

多個配置物件組成的陣列,可以一次構建執行多個配置任務

函式(env, ar**) => {}env接收cli命令傳遞的環境名(--env)引數

ar**指cli命令中所有的引數

webpack 4 新增了乙個工作模式的用法,它大大簡化了webpack的複雜程度。

它是針對不同環境的幾組預設的配置。

當未配置mode屬性時,終端會發出警告,大致內容是:mode未配置,預設使用production,可以指定值為development``production``none

production預設,webpack會自動啟動一些優化外掛程式,例如壓縮**。

可以通過--mode命令指定工作模式,也可以在配置檔案中指定mode屬性,取值有以下三個:

先將工作模式設定為none以觀察最原始狀態的打包。

檢視打包檔案**

(

function

(modules))(

[...

])

整體生成**是乙個立即執行函式,這個函式是webpack的工作入口,它接收乙個modules引數。

呼叫函式時傳入乙個陣列,陣列中每個元素都是引數列表相同的函式。

每乙個函式,就是源**中對應的每個模組。

也就是說,每個模組都會包裹在這樣乙個函式中,從而實現乙個私有作用域。

工作入口函式講解:

(

function

(modules)

;// 定義乙個用於載入模組的函式

function

__webpack_require__

(moduleid)

// 下面是在__webpack_require__上掛載了一些資料和工具函式

__webpack_require__.m = modules;

__webpack_require__.c = installedmodules;

__webpack_require__.d=

function

(exports, name, getter)

; __webpack_require__.r=

function

(exports)

; __webpack_require__.t=

function

(value, mode)

; __webpack_require__.n=

function

(module)

; __webpack_require__.o=

function

(object, property)

; __webpack_require__.p ="";

// 最後呼叫__webpack_public_path__載入源**中的入口模組並返回

// moduleid(0)即傳入的模組列表(modulelist)的下標

return

__webpack_require__

(__webpack_require__.s =0)

;})(

[...modulelist]

)

webpack二刷之三 Plugin 外掛程式機制

目的 增強webpack專案自動化能力。loader專注實現資源模組的載入,從而實現整體專案的打包。plugin解決專案中除了資源載入以外的自動化工作。例如在打包之前,自動清除dist目錄 拷貝不需要參與打包的資源檔案到輸出目錄 壓縮打包結果輸出的 webpack plugin 實現了大多前端工程化...

排序演算法之一 快速排序

1 先從數列中取出乙個數作為基準數。2 分割槽過程,將比這個數大的數全放到它的右邊,小於或等於它的數全放到它的左邊。3 再對左右區間重複第二步,直到各區間只有乙個數。1 預排序的輸入非常常見,因此不要選擇第乙個數作為基準數 2 隨機數的生成也較為昂貴 3 採用三數中值分割法 取左中右三個元素的中值作...

人機博弈之(一) 博弈介紹

1.人機博弈的要點 人機對弈的程式,至少應具備一下幾個部分 a 某種在機器上表示棋局的方法,讓程式知道博弈的狀態 b 產生合法的走法規則,是得博弈雙方公正,並可以判斷人類對手是否亂走 c 從所有合法的走法中選擇最佳的走法的技術 d 一種評估局面優劣的方法,同上面技術配合作出智慧型選擇 e 乙個實現遊...