一.webpack是什麼？

webpack是一個現代js應用程式的靜態模組打包器;
它的功能是:分析專案結構，找到js模組以及其他一些瀏覽器不能直接執行的拓展語言(sass,TypeScript,less),並將它們打包為合適的格式以供瀏覽器使用。

構建: 就是將原始碼轉換成釋出到線上可執行的JS,CSS,HTML程式碼 構建的過程包含: 程式碼轉換: TypeScript編譯成JS, less,sass編譯成css等 檔案優化: 能夠壓縮js,css,html程式碼,也能壓縮合並圖片 程式碼分割: 能夠提取多個頁面中公共程式碼,提取首頁不需要執行部分的程式碼讓其非同步執行 模組合併: 採用模組化的專案中,會有很多個模組和檔案，需要構建功能把模組分類合併成一個檔案 自動重新整理: 監聽本地原始碼的改變,自動重新構建重新整理瀏覽器 程式碼校檢: 在程式碼被提交到倉庫前需要校檢程式碼是否符合規範,以及單元測試是否通過 自動釋出: 自動構建出上線釋出程式碼,並傳輸給釋出系統

構建其實是工程化,自動化思想在前端開發中的體現,把一系列流程交給程式碼區實現,讓程式碼自動化的執行這一系列複雜的流程。

二.webpack的安裝

2.1使用CMD全域性安裝: npm install --global webpack 不推薦:因為全域性安裝會鎖定版本。 2.2區域性安裝: npm install --save-dev webpack 或者:npm install --save-dev [email protected]版本號 webpack在安裝4.0以上版本,還需要安裝一個外掛。 執行以下指令: npm install --save-dev webpack-cil